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

一，利用键盘响应，在不刷新本页面的情况下验证表单输入是否合法
用户通过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) {}
 }
}

时间： 2024-11-03 18:53:22

基于PHP+Ajax实现表单验证的详解_php技巧的相关文章

CI框架表单验证实例详解_php实例

本文实例讲述了CI框架表单验证的方法.分享给大家供大家参考,具体如下: 1.form头部信息的自动输出函数(view) <?php $attributes = array('class' => 'email', 'id' => 'myform'); echo form_open('email/send', $attributes); //上面一行代码输出: //<form method="post" accept-charset="utf-8"

Angular表单验证实例详解_AngularJS

表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlength,maxlength,required呀这些个东西,还有也支持h5的那些验证,h5的那些验证,就是type啦,type='email',number,url呀这些,然后现在要用angular来验证,可以定义样式哈,不错,然后怎么验证呢,好的上代码 <!DOCTYPE html> <ht

BootStrap智能表单实战系列(八)表单配置json详解_javascript技巧

 本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数量来自动使用不同的栅格, '1,2,2,4':使用指定的栅格来布局,如果配置的列数不足的情况将使用第一项(n,n 为一项) 2.hides的配置项 hides:[{id:'xxx',value:''}] 此项是可选的,主要用于编辑时存放一些不可见的列(如主键ID的值) 3.eles 表单元素的配置

JQurey Validation表单验证使用详解

功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则.兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+     是一款优秀的插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性.本文就是通过讲解这个实例来理解Validation的应用. 本实例涉及到的验证有: 用户名:长度.字符验证,重复性ajax验证(是否已存在).

PHP入门教程之表单与验证实例详解_php技巧

本文实例讲述了PHP表单与验证.分享给大家供大家参考,具体如下: Demo1.php <?php ob_start(); //重新导向一个 URL //header() //header('Location:Demo2.php'); //上面这句话可以自动跳转到你所想要的页面. //header('Location:http://www.baidu.com'); //上面这句话自动跳转到百度上面去. echo 'baidu.com'; header('Location:http://www.ba

ASP.NET表单验证方法详解第1/2页_实用技巧

1.使用验证控件 这属于客户端验证,微软开发人员将最常用的验证功能进行了封装,使得我们开发效率明显提高,而且特别是自定义验证控件,非常灵活,我们可以自行设计验证逻辑.但是验证控件收到了浏览器的限制,记得在一次开发过程中,使用FireFox浏览器进行浏览,发现所有的验证控件失灵,这个并非是ASP.NET设计的漏洞,只能说浏览器标准的不唯一造成的. ASP.NET公有六种验证控件,分别如下: RequiredFieldValidator(必须字段验证) 用于检查是否有输入值 CompareValid

JQurey Validation表单验证使用详解_jquery

是一款优秀的插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性.本文就是通过讲解这个实例来理解Validation的应用. 本实例涉及到的验证有: 用户名:长度.字符验证,重复性ajax验证(是否已存在). 密码:长度验证,重复输入密码验证. 邮件:邮件地址验证. 固定电话:中国大陆固定电话号码验证. 手机号:中国大陆手机号码验证. 网址:网站URL地址验证. 日期:标准日期格式验证. 数字:整数.正整数验证,数字范围验证. 身份证:大陆身份证号码验证. 邮政编码:

php常用表单验证类用法实例_php技巧

本文实例讲述了php常用表单验证类用法.分享给大家供大家参考.具体如下: <?php /** * 页面作用:常用表单验证类 * 作 者:欣然随风 * QQ:276624915 */ class class_post { //验证是否为指定长度的字母/数字组合 function fun_text1($num1,$num2,$str) { Return (preg_match("/^[a-zA-Z0-9]{".$num1.",".$num2."}$/&q

php封装的表单验证类完整实例_php技巧

本文实例讲述了php封装的表单验证类.分享给大家供大家参考,具体如下: <?php //封装一个表单验证类 //中文验证.邮箱验证.电话号码.手机.QQ.身份证.(由字母.数字.下划线组成,不能以数字开头) header('content-type:text/html;charset=utf-8'); class Form{ /* //中文验证的方法 //参数:$str,$num1,$num2 //返回值:匹配成功返回匹配的次数 */ public function checkChina($st