Ajax的常用技巧（1）----实现表单数据验证

àì夳堔傛蜴生んèń 2021-06-24 15:57 475阅读 0赞

为了保证信息的有效性和正确性，防止数据的错误和无效，在使用数据之前，通常要对浏览者在客户端输入的数据进行验证。但是这种处理方式并不能解决所有的验证问题，例如，在进行用户信息注册时，客户端只能实现类似是否填写了必要的信息，长度是否满足需求等基本的有效性检查，但是对于所填写的用户信息是否已经被占用等诸如此类的检查，在客户端脚本中是没有办法实现的。  
同时，如果按照传统的方式将此类验证逻辑放在服务端实现，也会因为面临需要整个页面刷新的问题，而使得问题不能以直观的方式迅速显示在用户面前。借助Ajax技术，在异步交互的前提下，调用服务器端事先编写好的验证逻辑，可以很好的解决此问题。  
数据的验证有两方面的含义，一方面是数据格式正确性的验证；一种是数据数值的验证。通常数据格式的验证都是在客户端进行，而数据数值的验证在服务器端进行。在使用Ajax技术进行数据验证时，应该确保数据格式验证要优先于数据数字验证。  
现在创建一个实例，以显示Ajax技术的数据验证功能。该实例验证分为两部分，一部分是数据格式验证；一部分是数据数值验证。为了更加有效地反应表单数据验证，这里采用了数据库表中的数据验证。  
注意：为了减少程序操作的复杂度，突出Ajax表单中的数据验证功能。这里采用了Access数据库。

**1,服务器端代码**

该实例服务器端代码主要具有两个功能，首先查询客户端传递的名称在数据库中是否存在，如果存在，则不允许数据插入到数据库中；如果查询数据不存在，则向数据库表中插入数据。该实例需要使用数据库操作，故单独创建一个jsp文件链接数据。打开记事本，输入下列代码：

<%@ page language="java" import="java.util.*,java.io.File,java.sql.*" pageEncoding="GBK"%>
    <%@page contentType="text/html;charset=gb2312"%>
    <%
     int status=0;
      String name=request.getParameter("name");
      name=new   String(name.getBytes("ISO-8859-1"), "UTF-8"); 
     //  out.print(name);
      String insertSql="insert into test (NAME) values ('"+name+"')";
      String sql="select * from test where NAME='"+name+"'";
     String   dbUr1="jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ=E:"+File.separator+"dataAnalysis"+File.separator+"test.mdb";   
    		  String   user="";   
    		  String   password="";  
    		  try{ 
    		  Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");   
    		  Connection   c=DriverManager.getConnection(dbUr1,user,password);   
    		  Statement s=c.createStatement();   
    		  ResultSet   r=s.executeQuery(sql);   
    		 if(r.next()){   
    			 status=1;
    		  }   
    		  else{
    			  s.executeUpdate(insertSql);
    		  }
    		    s.close();  
    		  }catch(Exception e){
    		  e.printStackTrace();
    		  }
    		 
      out.print(status); 
    %>

可见创建了变量status，当存在时，status赋值为1，否则赋值为0，最后返回status。

**2,客户端代码**

客户端代码主要用来校验数据格式和异步传输数据。打开记事本，输入下列代码：

<%@ page language="java" import="java.util.*,com.njue.DBManager.*" pageEncoding="GBK"%>
    <html>
    <head>
    <title>Simple AjaxExample </title>
    <script type="text/javascript">
    var xmlHttp;
       var name;
       var password;
       var password1;
    function createXMLHttpRequest(){
       if(window.ActiveXObject) {
         xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");//创建XMLHttpRequet对象
       }
      else if (window.XMLHttpRequest) {
         xmlHttp=new XMLHttpRequest();//创建XMLHttpRequet对象
         }
     }
    function startRequest() {
     createXMLHttpRequest();
       
     xmlHttp.onreadystatechange=handleStateChange;
     xmlHttp.open("POST", "Ran.jsp", true);
     var str="name="+name;
      xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
     xmlHttp.send(str);
     }
    function handleStateChange() {
      if(xmlHttp.readyState==4) {
     if(xmlHttp.status==200) {
      if( xmlHttp.responseText==1)
      document.getElementById("nameInfo").innerHTML="<font color='red'>该昵称已存在</font>";
      else
      alert("恭喜你，注册成功！");
         }
      }
    }
    function check(){
    if(name==""){
    document.getElementById("nameInfo").innerHTML="<font color='red'>昵称不能为空！</font>";
    return false;
    }
    else if(password==""){
    document.getElementById("passwordInfo").innerHTML="<font color='red'>密码不能为空！</font>";
    return false;
    }
    else if(password1==""){
    document.getElementById("password1Info").innerHTML="<font color='red'>密码不能为空！</font>";
    return false;
    }
    else if(password!=password1){
    document.getElementById("password1Info").innerHTML="<font color='red'>两次输入的密码不一致！</font>";
    return false;
    }
    else {
    clear();
    return true;
    }
    }
    function exec(){
    clear();
    name=document.getElementById("userName").value;
    password=document.getElementById("passWord").value;
    password1=document.getElementById("passWord1").value;
    if(check()==true){
    startRequest();
    }
    }
    function clear(){
    document.getElementById("nameInfo").innerHTML="";
    document.getElementById("passwordInfo").innerHTML="";
    document.getElementById("password1Info").innerHTML="";
    }
    </script>
    </head>
    <body>
      <form action="#">
      <div align="center">
      <table border="1" >
    <tr><td align="center" valign="center"> 昵称： <input id="userName"/><div id="nameInfo"></div><br/></td></tr>
     <tr><td>请输入密码： <input type="password" id="passWord"/><div id="passwordInfo"></div><br/></td></tr>
     <tr><td> 请再次输入密码： <input type="password" id="passWord1"/><div id="password1Info"></div><br/><tr/><td/>
     <tr><td><input type="button" value="注册"  οnclick="exec(); "/></td></tr>
      </table>
      </div>
    </form>
    </body>
    </html>