基于PHP+Ajax实现表单验证的详解


Posted in PHP onJune 25, 2013

一,利用键盘响应,在不刷新本页面的情况下验证表单输入是否合法
用户通过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)
<?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函数初始化
// 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) {}
 }
}
PHP 相关文章推荐
PHP实现分页的一个示例
Oct 09 PHP
PHP版自动生成文章摘要
Jul 23 PHP
在PHP中养成7个面向对象的好习惯
Jul 17 PHP
php引用地址改变变量值的问题
Mar 23 PHP
关于使用coreseek并为其做分页的介绍
Jun 21 PHP
CI框架开发新浪微博登录接口源码完整版
May 28 PHP
PHP实现自动登入google play下载app report的方法
Sep 23 PHP
php文件上传简单实现方法
Jan 24 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
Mar 18 PHP
CI(CodeIgniter)模型用法实例分析
Jan 20 PHP
老生常谈PHP面向对象之解释器模式
May 17 PHP
php微信扫码支付 php公众号支付
Mar 24 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
Jun 25 #PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
Jun 25 #PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
Jun 24 #PHP
PHP多例模式介绍
Jun 24 #PHP
PHP获取和操作配置文件php.ini的几个函数介绍
Jun 24 #PHP
PHP垃圾回收机制引用计数器概念分析
Jun 24 #PHP
PHP随机字符串生成代码(包括大小写字母)
Jun 24 #PHP
You might like
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
Python中的元类编程入门指引
2015/04/15 Python
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
python僵尸进程产生的原因
2017/07/21 Python
python中logging库的使用总结
2017/10/18 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
python从Oracle读取数据生成图表
2020/10/14 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
小学家长会邀请函
2014/01/23 职场文书
庆元旦广播稿
2014/02/10 职场文书
社区母亲节活动记录
2014/03/06 职场文书
婚前协议书
2014/04/15 职场文书
师德师风演讲稿
2014/05/05 职场文书
《秋思》教学反思
2016/02/23 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS