基于PHP+Ajax实现表单验证的详解
一,利用键盘响应,在不刷新本页面的情况下验证表单输入是否合法 用户通过onkeydown和onkeyup事件来触发响应事件。使用方法和onclick事件类似。onkeydown表示当键盘上的键被按下时触发,onkeyup和它正好相反,当键盘上的键被按下又抬起时触发。 两种常用调用方法: (1)将事件添加到页面元素中,当用户输入完信息后,单击任意键,onkeydown事件被触发,并调用refer()函数。 这种方法最简单,最直接,格式如下: 代码如下:
1 2 3 4 5 6 7 | <script type= "text/javascript" > ... function refer(){ ... } </script> <input type= "text" onkeydown= "refer()" /> |
(2)通过window.onload加载,当页面被载入时,事件被载入。当用户输入信息时,每输入一个字母,都将触发该事件,在该事件调用的函数中,对用户输入信息进行判断。 代码如下:
1 2 3 4 5 | window.onload = function(){ $( 'regname' ).onkeydown = function (){ name = $( 'regname' ).value; } } |
使用onkeydown事件还可以实现对特定键的控制,包括<Enter>键(event.keyCode==13)、空格键(event.keyCode==32)、<Ctrl>键、<Alt>键等所有的按键,这是通过在onkeydown事件中使用keyCode属性来实现的。KeyCode属性能够知道用户按下的是哪个键。 二,注册信息验证 通用函数,返回被触发的id元素对象 代码如下:
1 2 3 4 5 6 7 | function $(id){ return document.getElementById(id); } window.onload事件,表示当前窗口被载入时触发。function(){...}表示当前页面被载入时所要进行的操作。 window.onload = function(){ ... } |
function()函数解析; 首先将焦点定位到用户名文本框,方便用户操作。接下来声明了5个变量,这5个变量代表了5个要检测的数据的结果。当检测数据为合格时,将变量值设为"yes". 代码如下:
1 2 3 4 5 6 7 8 9 | $( 'regname' ).focus(); var cname1,cname2,cpwd1,cpwd2; //声明了5个变量,表示要检测的5项数据chkreg()函数是每一次触发键盘事件后都要调用的,该函数判断5个变量的值,只有当所有变量都为"yes"时,注册按钮才会被激活。 function chkreg(){ if ((cname1 == 'yes' ) && (cname2 == 'yes' ) && (cpwd1 == 'yes' ) && (cpwd2 == 'yes' )){ $( 'regbtn' ).disabled = false ; } else { $( 'regbtn' ).disabled = true ; } } |
下面验证用户名,当用户输入注册名称时,该函数会把用户的每次输入都做一下正则判断,并根据结果设置不同的cname1的值。 代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $( 'regname' ).onkeyup = function (){ name = $( 'regname' ).value; //获取注册名称 cname2 = '' ; if (name.match(/^[a-zA-Z_]*/) == '' ){ $( 'namediv' ).innerHTML = '<font color=red>必须以字母或下划线开头</font>' ; cname1 = '' ; } else if (name.length <= 3){ $( 'namediv' ).innerHTML = '<font color=red>注册名称必须大于3位</font>' ; cname1 = '' ; } else { $( 'namediv' ).innerHTML = '<font color=green>注册名称符合标准</font>' ; cname1 = 'yes' ; } chkreg(); //调用chkreg()函数,判断5个变量是否正确 } |
当用户名文本框失去焦点时,即用户输入完毕转到页面中其他元素的时候,将检测用户名是否重复。用户名判断使用Ajax技术调用了chkname.php(该页面用户名验证代码稍后贴出)并根据chkname.php的返回值在div标签中显示判断结果。 代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $( 'regname' ).onblur = function(){ name = $( 'regname' ).value; //获取注册名称 if (cname1 == 'yes' ){ //当用户名称的格式输入合格后才进行这一步 xmlhttp.open( 'get' , 'chkname.php?name=' +name, true ); //open()创建XMLHttpRequest初始化连接,Ajax创建新的请求 xmlhttp.onreadystatechange = function(){ //当指定XMLHttpRequest为异步传输时(false),发生任何状态的变化,该对象都会调用onreadystatechange所指定的函数 if (xmlhttp.readyState == 4){ //XMLHttpRequest处理状态,4表示处理完毕 if (xmlhttp.status == 200){ //服务器响应的HTTP代码,200表示正常 var msg = xmlhttp.responseText; //获取响应页的内容 if (msg == '1' ){ //chkname.php页面查找数据库,数据库没有该用户返回1 $( 'namediv' ).innerHTML= "<font color=green>恭喜您,该用户名可以使用!</font>" ; cname2 = 'yes' ; } else if (msg == '2' ){ //数据库存在该用户返回0 $( 'namediv' ).innerHTML= "<font color=red>用户名被占用!</font>" ; cname2 = '' ; } else { $( 'namediv' ).innerHTML= "<font color=red>" +msg+ "</font>" ; cname2 = '' ; } } } } xmlhttp.send( null ); chkreg(); //检测是否激活注册按钮 } } |
验证密码,验证密码时,除了可以限制密码的长度外,还可以判断密码的强度。 代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | $( 'regpwd1' ).onkeyup = function(){ pwd = $( 'regpwd1' ).value; pwd2 = $( 'regpwd2' ).value; if (pwd.length < 6){ $( 'pwddiv1' ).innerHTML = '<font color=red>密码长度最少需要6位</font>' ; cpwd1 = '' ; } else if (pwd.length >= 6 && pwd.length < 12){ $( 'pwddiv1' ).innerHTML = '<font color=green>密码符合要求。密码强度:弱</font>' ; cpwd1 = 'yes' ; } else if ((pwd.match(/^[0-9]*$/)!= null ) || (pwd.match(/^[a-zA-Z]*$/) != null )){ $( 'pwddiv1' ).innerHTML = '<font color=green>密码符合要求。密码强度:中</font>' ; cpwd1 = 'yes' ; } else { $( 'pwddiv1' ).innerHTML = '<font color=green>密码符合要求。密码强度:高</font>' ; cpwd1 = 'yes' ; } if (pwd2 != '' && pwd != pwd2){ $( 'pwddiv2' ).innerHTML = '<font color=red>两次密码不一致!</font>' ; cpwd2 = '' ; } else if (pwd2 != '' && pwd == pwd2){ $( 'pwddiv2' ).innerHTML = '<font color=green>密码输入正确</font>' ; cpwd2 = 'yes' ; } chkreg(); } 二次密码判断比较简单,只要判断第二次输入密码是否和第一次输入相等。 代码如下: $( 'regpwd2' ).onkeyup = function(){ pwd1 = $( 'regpwd1' ).value; pwd2 = $( 'regpwd2' ).value; if (pwd1 != pwd2){ $( 'pwddiv2' ).innerHTML = '<font color=red>两次密码不一致!</font>' ; cpwd2 = '' ; } else { $( 'pwddiv2' ).innerHTML = '<font color=green>密码输入正确</font>' ; cpwd2 = 'yes' ; } chkreg(); } |
上面是必须填写信息,如果用户希望填写更详细的资料,可单击"详细资料按钮" 代码如下:
1 2 3 4 5 6 7 | $( 'morebtn' ).onclick = function(){ if ($( 'morediv' ).style.display == '' ){ $( 'morediv' ).style.display = 'none' ; } else { $( 'morediv' ).style.display = '' ; } } |
E-mail格式验证,输入字符串中必须包含@和.,同时这两个字符串的位置既不能在首尾也不能连在一起 代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 | $( 'email' ).onkeyup = function(){ emailreg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; $( 'email' ).value.match(emailreg); if ($( 'email' ).value.match(emailreg) == null ){ $( 'emaildiv' ).innerHTML = '<font color=red>错误的email格式</font>' ; cemail = '' ; } else { $( 'emaildiv' ).innerHTML = '<font color=green>输入正确</font>' ; cemail = 'yes' ; } chkreg(); } |
三,检测用户名(chkname.php) 代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <?php session_start(); include_once "conn/conn.php" ; $reback = '0' ; $sql = "select * from tb_member where name='" .$_GET['name ']."' "; $num = $conne->getRowsNum($sql); if ($num == 1){ $reback = '2' ; } else if ($num == 0){ $reback = '1' ; } else { $reback = $conne->msg_error(); } echo $reback; ?> |
四,XMLHttpRequest函数初始化 代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // JavaScript Document var xmlhttp = false ; if (window.XMLHttpRequest) { //Mozilla、Safari等浏览器 xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { //IE浏览器 try { xmlhttp = new ActiveXObject( "Msxml2.XMLHTTP" ); } catch (e) { try { xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" ); } catch (e) {} } } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步