用户注册时表单验证的问题

就像CSDN新用户注册的时候
填下一项的时候自动验证上一项,是怎么实现的?
有一个具体的代码给研究研究最后.
小菜鸟.....

解决方案 »

  1.   


    <html>
    <head>
    <head>
    <title></title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    </head>
    <body>
    <input id="x" size="4">
    <input id="y" size="4">
    <script>
    document.getElementById('x').onblur = function(){
    if(!this.value){
    alert('第一个不能为空！');

    }
    };
    document.getElementById('y').onblur = function(){
    if(!this.value){
    alert('第二个不能为空！');
    }
    };
    </script>
    </body>
    </html>
    就是失去焦点事件~·
      

  2.   

    用ajax请求 光标失去焦点时触发ajax请求到后台验证
      这是很早以前做着玩的一个 不过不是失去焦点而是点击按钮触发ajax请求 查看当前登录用户的数量
      网上的例子更全 上网找找<?xml version="1.0" encoding="utf-8" ?>
    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>    
        
        <script type="text/javascript">
           function login(form){
             if(check(document.userForm)){
             form.action="userAction.do?method=login";
             form.submit();
             }                  
           }
           
           function check(form){        
             if(form.loginName.value==""){
               alert("请输入用户名");
               return false;
             }
             if(form.password.value==""){
               alert("请输入密码");
               return false;
             }
             return true;
           }
        </script>
    <style type="text/css">

      
    </style>
      </head>  <body onload="javascript:document.getElementById('loginName').focus();">
      
          <div class="content_opera_div">
              <form name="userForm" id="userForm" method="post">
            <table style="" align="center"> 
              <tr><td valign="top"></td></tr>  
              <tr><td valign="bottom"><table>     
              <tr>
                <td ><label>账号</label><label id="name_check_show" class="name_check_show"></label></td>
                <td><input type="text" name="loginName" id="loginName" size="20px" value="${loginName}"/></td>
              </tr><tr>  
                <td><label>密码</label> </td>
                <td><input type="password" name="password" id="password" size="20px" value="${password}"/></td>           
              </tr>
              <tr> <td colspan="4" align="center"><input type="button" id="verifyButton" onclick="javascript:login(document.userForm);" value="提交"/> </td></tr>                                       
            </table>
             <div align="center">${errMessage}</div>
            </td></tr>
        </table>    
              </form>
            <div id="content_show_div" class="content_show_div"></div>
          </div>       
      </body>
    </html>
       // JScript source code
    $(document).ready(function(){   
         $("#verifyButton").click(function(){//button按钮，单击事件
         alert("111");
         //1、获取文本框内容
        var userName = $("#loginName").val(); 
        if(userName==""){//判断该内容是否为空
          alert("用户名不能为空!");
          }else{      
           showResult();
            }
        });
           
           //文本框 鼠标弹起事件
         $("#userName").keyup(function (){
            
         
         });   
      });
      
    function showResult(){    $.get("JqueryRequest01.do?method=quer",{loginName:"manage",password:"111111"},function(data){
           /* 1、 服务器端返回的数据json格式是：{"loginName":"manage","password":"111111","userName":"管理员"}  
          
             var obj = eval('('+data+')');// 当json是是字符串时  使用该方法将json格式的字符串转换成PO对象
             $("#message").html(obj["userName"]+obj["password"]+obj["loginName"]);//根据属性名获取对应值      
            */   
           
           
           /* 2、服务器端返回的是一个数据集合
             *   服务器端返回的数据json格式是：              
     {
     "a":{"loginName":"xuedesheng","id":"1","password":"3188562","userName":"管理员"},
     "b":{"loginName":"meiyansun","id":"2","password":"iloveyousym","userName":"普通用户"}
     }       
            */                      
              var object = eval('('+data+')');          
              var content = "当前在线用户："
              for(var key in object){
                  var obj = object[key];//也可写成：object.key;
                  content +=obj.loginName+"<br>";              
              }          
              $("#content_show_div").html(content);                                                                                           
        });
    }
      

  3.   


    <script type="text/javascript">
      function checkForm(){
      var username = document.getElementById('username').value;
     var pwd = document.getElementById('password').value;
     if(username == ""){
       alert('用户名不能为空')
      return;
     }
     if(pwd == ""){
       alert('密码不能为空')
      return;
     }
    }
    </script><input id="username" name="username" onblur="checkForm()">
    <input id="password" name="password" onblur="checkForm()">