基于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批量删除数据
Jan 18 PHP
解析yii数据库的增删查改
Jun 20 PHP
解析PHP中intval()等int转换时的意外异常情况
Jun 21 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
Dec 22 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
Sep 24 PHP
php实现过滤表单提交中html标签的方法
Oct 17 PHP
PHP实现采集抓取淘宝网单个商品信息
Jan 08 PHP
php数组函数array_walk用法示例
May 26 PHP
ThinkPHP中调用PHPExcel的实现代码
Apr 08 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
Jan 16 PHP
PHP+jQuery实现双击修改table表格功能示例
Feb 21 PHP
Yii框架组件的事件机制原理与用法分析
Apr 07 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
德劲1104的电路分析与改良
2021/03/01 无线电
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
php微信开发之上传临时素材
2016/06/24 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
Python中的exec、eval使用实例
2014/09/23 Python
Python 正则表达式(转义问题)
2014/12/15 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
python 重定向获取真实url的方法
2018/05/11 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python pandas模块基础学习详解
2019/07/03 Python
pytorch 共享参数的示例
2019/08/17 Python
Python图片的横坐标汉字实例
2019/12/04 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
煤矿班组长的职责
2013/12/25 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
表彰大会策划方案
2014/05/13 职场文书
百日安全生产活动总结
2014/07/05 职场文书
红色经典电影观后感
2015/06/18 职场文书