PHP+Ajax实现表单验证
来源:互联网 发布:腾讯内部员工网络 编辑:程序博客网 时间:2024/05/29 05:57
用户通过onkeydown和onkeyup事件来触发响应事件。使用方法和onclick事件类似。onkeydown表示当键盘上的键被按下时触发,onkeyup和它正好相反,当键盘上的键被按下又抬起时触发。
两种常用调用方法:
(1)将事件添加到页面元素中,当用户输入完信息后,单击任意键,onkeydown事件被触发,并调用refer()函数。
这种方法最简单,最直接,格式如下:
<script type="text/javascript"> ... function refer(){ ... }</script><input type="text" onkeydown="refer()"/>
(2)通过window.onload加载,当页面被载入时,事件被载入。当用户输入信息时,每输入一个字母,都将触发该事件,在该事件调用的函数中,对用户输入信息进行判断。
window.onload = function(){$('regname').onkeydown = function (){name = $('regname').value;}}
使用onkeydown事件还可以实现对特定键的控制,包括<Enter>键(event.keyCode==13)、空格键(event.keyCode==32)、<Ctrl>键、<Alt>键等所有的按键,这是通过在onkeydown事件中使用keyCode属性来实现的。KeyCode属性能够知道用户按下的是哪个键。
二,注册信息验证
通用函数,返回被触发的id元素对象
function $(id){return document.getElementById(id);}
window.onload事件,表示当前窗口被载入时触发。function(){...}表示当前页面被载入时所要进行的操作。
window.onload = function(){...}
function()函数解析;
首先将焦点定位到用户名文本框,方便用户操作。接下来声明了5个变量,这5个变量代表了5个要检测的数据的结果。当检测数据为合格时,将变量值设为"yes".
$('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的值。
$('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标签中显示判断结果。
$('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(); //检测是否激活注册按钮}}
验证密码,验证密码时,除了可以限制密码的长度外,还可以判断密码的强度。
$('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();}
上面是必须填写信息,如果用户希望填写更详细的资料,可单击"详细资料按钮"
$('morebtn').onclick = function(){if($('morediv').style.display == ''){$('morediv').style.display = 'none';}else{$('morediv').style.display = '';}}
E-mail格式验证,输入字符串中必须包含@和.,同时这两个字符串的位置既不能在首尾也不能连在一起
$('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)
<?phpsession_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函数初始化
// JavaScript Documentvar 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) {}}}
- PHP+Ajax实现表单验证
- PHP+Ajax实现表单验证
- PHP AJAX 表单验证类
- Ajax 表单验证 实现代码
- Ajax 表单验证 实现代码
- php实现表单验证类
- Struts2 Jquery Json 实现AJax表单验证
- 自己实现的ajax表单验证
- Struts2 Jquery Json 实现AJax表单验证
- ajax正则,php正则验证表单以及验证码
- Ajax实现表单验证验证用户名是否已经存在
- PHP jQuery Ajax提交与验证form表单详解
- 基于PHP与Ajax的表单验证功能
- asp+ajax验证表单
- 表单ajax验证
- ajax 注册表单验证
- 使用 Ajax 验证表单
- ajax对表单验证
- FreeMarker 指南(一) -【纯属整理】
- JAVA中使用FTPClient实现文件上传下载
- unity3d 在gui上绘制序列帧
- 设计模式C++实现(5)——原型模式、模板方法模式
- 设计模式C++实现(6)——建造者模式
- PHP+Ajax实现表单验证
- SeeTest_See test 解决方法
- valgrind 的使用简介
- windows8 开发教程 教你制作 多点触控Helper可将任意容器内任意对象进行多点缩放
- android 在listview上的 gallery 禁止上下滑动
- 《一步一脚印 90后程序员》9
- 排序算法05:归并排序
- .NET设计模式之抽象工厂模式(Abstract Factory)
- LATCH HA