PHP+Ajax实现表单验证

一，利用键盘响应，在不刷新本页面的情况下验证表单输入是否合法
用户通过onkeydown和onkeyup事件来触发响应事件。使用方法和onclick事件类似。onkeydown表示当键盘上的键被按下时触发，onkeyup和它正好相反，当键盘上的键被按下又抬起时触发。
两种常用调用方法：
(1)将事件添加到页面元素中，当用户输入完信息后，单击任意键，onkeydown事件被触发，并调用refer()函数。

这种方法最简单，最直接，格式如下：

[javascript]  view plain copy print ?

1. <script type="text/javascript">  
2.    ...  
3.    function refer(){  
4.    ...  
5.    }  
6. </script>  
7. <input type="text" οnkeydοwn="refer()"/>    

(2)通过window.onload加载，当页面被载入时，事件被载入。当用户输入信息时，每输入一个字母，都将触发该事件，在该事件调用的函数中，对用户输入信息进行判断。

[javascript]  view plain copy print ?

1. window.onload = function(){  
2.     $('regname').onkeydown = function (){  
3.         name = $('regname').value;  
4.     }  
5. }  

使用onkeydown事件还可以实现对特定键的控制，包括<Enter>键(event.keyCode==13)、空格键(event.keyCode==32)、<Ctrl>键、<Alt>键等所有的按键，这是通过在onkeydown事件中使用keyCode属性来实现的。KeyCode属性能够知道用户按下的是哪个键。
二，注册信息验证
通用函数，返回被触发的id元素对象

[javascript]  view plain copy print ?

1. function $(id){  
2.     return document.getElementById(id);  
3. }  

window.onload事件，表示当前窗口被载入时触发。function(){...}表示当前页面被载入时所要进行的操作。

[javascript]  view plain copy print ?

1. window.onload = function(){  
2.     ...  
3. }  

function()函数解析；
首先将焦点定位到用户名文本框，方便用户操作。接下来声明了5个变量，这5个变量代表了5个要检测的数据的结果。当检测数据为合格时，将变量值设为"yes". 

[javascript]  view plain copy print ?

1. $('regname').focus();  
2. var cname1,cname2,cpwd1,cpwd2;  //声明了5个变量，表示要检测的5项数据  

chkreg()函数是每一次触发键盘事件后都要调用的，该函数判断5个变量的值，只有当所有变量都为"yes"时，注册按钮才会被激活。

[javascript]  view plain copy print ?

1. function chkreg(){  
2.     if((cname1 == 'yes') && (cname2 == 'yes') && (cpwd1 == 'yes') && (cpwd2 == 'yes')){  
3.         $('regbtn').disabled = false;  
4.     }else{  
5.         $('regbtn').disabled = true;  
6.     }  
7. }  

下面验证用户名，当用户输入注册名称时，该函数会把用户的每次输入都做一下正则判断，并根据结果设置不同的cname1的值。

[javascript]  view plain copy print ?

1. $('regname').onkeyup = function (){  
2.     name = $('regname').value;  //获取注册名称  
3.     cname2 = '';  
4.     if(name.match(/^[a-zA-Z_]*/) == ''){  
5.         $('namediv').innerHTML = '<font color=red>必须以字母或下划线开头</font>';  
6.         cname1 = '';  
7.     }else if(name.length <= 3){  
8.         $('namediv').innerHTML = '<font color=red>注册名称必须大于3位</font>';  
9.         cname1 = '';  
10.     }else{  
11.         $('namediv').innerHTML = '<font color=green>注册名称符合标准</font>';  
12.         cname1 = 'yes';  
13.     }  
14.     chkreg(); //调用chkreg()函数，判断5个变量是否正确  
15. }  

当用户名文本框失去焦点时，即用户输入完毕转到页面中其他元素的时候，将检测用户名是否重复。用户名判断使用Ajax技术调用了chkname.php(该页面用户名验证代码稍后贴出)并根据chkname.php的返回值在div标签中显示判断结果。

[javascript]  view plain copy print ?

1. $('regname').onblur = function(){  
2.     name = $('regname').value;  //获取注册名称  
3.     if(cname1 == 'yes'){    //当用户名称的格式输入合格后才进行这一步  
4.         xmlhttp.open('get','chkname.php?name='+name,true);  //open()创建XMLHttpRequest初始化连接，Ajax创建新的请求  
5.         xmlhttp.onreadystatechange = function(){  //当指定XMLHttpRequest为异步传输时(false),发生任何状态的变化，该对象都会调用onreadystatechange所指定的函数  
6.             if(xmlhttp.readyState == 4){  //XMLHttpRequest处理状态，4表示处理完毕  
7.                 if(xmlhttp.status == 200){ //服务器响应的HTTP代码，200表示正常  
8.                     var msg = xmlhttp.responseText;     //获取响应页的内容  
9.                     if(msg == '1'){     //chkname.php页面查找数据库，数据库没有该用户返回1  
10.                         $('namediv').innerHTML="<font color=green>恭喜您，该用户名可以使用!</font>";  
11.                         cname2 = 'yes';  
12.                     }else if(msg == '2'){   //数据库存在该用户返回0  
13.                         $('namediv').innerHTML="<font color=red>用户名被占用！</font>";  
14.                         cname2 = '';  
15.                     }else{  
16.                         $('namediv').innerHTML="<font color=red>"+msg+"</font>";  
17.                         cname2 = '';  
18.                     }  
19.                 }  
20.             }  
21.         }  
22.         xmlhttp.send(null);  
23.         chkreg(); //检测是否激活注册按钮  
24.     }  
25. }  

验证密码，验证密码时，除了可以限制密码的长度外，还可以判断密码的强度。

[javascript]  view plain copy print ?

1. $('regpwd1').onkeyup = function(){  
2.     pwd = $('regpwd1').value;  
3.     pwd2 = $('regpwd2').value;  
4.     if(pwd.length < 6){  
5.         $('pwddiv1').innerHTML = '<font color=red>密码长度最少需要6位</font>';  
6.         cpwd1 = '';  
7.     }else if(pwd.length >= 6 && pwd.length < 12){  
8.         $('pwddiv1').innerHTML = '<font color=green>密码符合要求。密码强度：弱</font>';  
9.         cpwd1 = 'yes';  
10.     }else if((pwd.match(/^[0-9]*$/)!=null) || (pwd.match(/^[a-zA-Z]*$/) != null )){  
11.         $('pwddiv1').innerHTML = '<font color=green>密码符合要求。密码强度：中</font>';  
12.         cpwd1 = 'yes';  
13.     }else{  
14.         $('pwddiv1').innerHTML = '<font color=green>密码符合要求。密码强度：高</font>';  
15.         cpwd1 = 'yes';  
16.     }  
17.     if(pwd2 != '' && pwd != pwd2){  
18.         $('pwddiv2').innerHTML = '<font color=red>两次密码不一致!</font>';  
19.         cpwd2 = '';  
20.     }else if(pwd2 != '' && pwd == pwd2){  
21.         $('pwddiv2').innerHTML = '<font color=green>密码输入正确</font>';  
22.         cpwd2 = 'yes';  
23.     }  
24.     chkreg();  
25. }  

二次密码判断比较简单，只要判断第二次输入密码是否和第一次输入相等。

[javascript]  view plain copy print ?

1. $('regpwd2').onkeyup = function(){  
2.     pwd1 = $('regpwd1').value;  
3.     pwd2 = $('regpwd2').value;  
4.     if(pwd1 != pwd2){  
5.         $('pwddiv2').innerHTML = '<font color=red>两次密码不一致!</font>';  
6.         cpwd2 = '';  
7.     }else{  
8.         $('pwddiv2').innerHTML = '<font color=green>密码输入正确</font>';  
9.         cpwd2 = 'yes';  
10.     }  
11.     chkreg();  
12. }  

上面是必须填写信息，如果用户希望填写更详细的资料，可单击"详细资料按钮"

[javascript]  view plain copy print ?

1. $('morebtn').onclick = function(){  
2.     if($('morediv').style.display == ''){  
3.         $('morediv').style.display = 'none';  
4.     }else{  
5.         $('morediv').style.display = '';  
6.     }  
7. }  

E-mail格式验证，输入字符串中必须包含@和.，同时这两个字符串的位置既不能在首尾也不能连在一起

[javascript]  view plain copy print ?

1. $('email').onkeyup = function(){  
2.     emailreg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;  
3.     $('email').value.match(emailreg);  
4.     if($('email').value.match(emailreg) == null){  
5.         $('emaildiv').innerHTML = '<font color=red>错误的email格式</font>';  
6.         cemail = '';  
7.     }else{  
8.         $('emaildiv').innerHTML = '<font color=green>输入正确</font>';  
9.         cemail = 'yes';  
10.           
11.     }  
12.     chkreg();  
13. }  

三，检测用户名(chkname.php)

[php]  view plain copy print ?

1. <?php  
2. session_start();  
3. include_once "conn/conn.php";  
4. $reback = '0';  
5. $sql = "select * from tb_member where name='".$_GET['name']."'";  
6. $num = $conne->getRowsNum($sql);  
7. if($num == 1){  
8.     $reback = '2';  
9. }else if($num == 0){  
10.     $reback = '1';  
11. }else{  
12.     $reback = $conne->msg_error();  
13. }  
14. echo $reback;  
15. ?>  

四，XMLHttpRequest函数初始化

[javascript]  view plain copy print ?

1. // JavaScript Document  
2. var xmlhttp = false;  
3. if (window.XMLHttpRequest) {                                    //Mozilla、Safari等浏览器  
4.     xmlhttp = new XMLHttpRequest();  
5. }   
6. else if (window.ActiveXObject) {                                //IE浏览器  
7.     try {  
8.         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  
9.     } catch (e) {  
10.         try {  
11.             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
12.        } catch (e) {}  
13.     }  
14. }  

http://blog.youkuaiyun.com/zouyi615/article/details/7732904