php语言

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

时间:2024-08-22 21:22:38 php语言 我要投稿
  • 相关推荐

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

  文章是对PHP+Ajax实现表单验证的代码进行了详细的分析介绍,需要的朋友参考下。

  一,利用键盘响应,在不刷新本页面的情况下验证表单输入是否合法

  用户通过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_]*/) == ''){

  $('namep').innerHTML = '<font color=red>必须以字母或下划线开头</font>';

  cname1 = '';

  }else if(name.length <= 3){

  $('namep').innerHTML = '<font color=red>注册名称必须大于3位</font>';

  cname1 = '';

  }else{

  $('namep').innerHTML = '<font color=green>注册名称符合标准</font>';

  cname1 = 'yes';

  }

  chkreg(); //调用chkreg()函数,判断5个变量是否正确

  }

  当用户名文本框失去焦点时,即用户输入完毕转到页面中其他元素的时候,将检测用户名是否重复。用户名判断使用Ajax技术调用了chkname.php(该页面用户名验证代码稍后贴出)并根据chkname.php的返回值在p标签中显示判断结果。

  复制代码 代码如下:

  $('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

  $('namep').innerHTML="<font color=green>恭喜您,该用户名可以使用!</font>";

  cname2 = 'yes';

  }else if(msg == '2'){ //数据库存在该用户返回0

  $('namep').innerHTML="<font color=red>用户名被占用!</font>";

  cname2 = '';

  }else{

  $('namep').innerHTML="<font color=red>"+msg+"</font>";

  cname2 = '';

  }

  }

  }

  }

  xmlhttp.send(null);

  chkreg(); //检测是否激活注册按钮

  }

  }

  验证密码,验证密码时,除了可以限制密码的长度外,还可以判断密码的强度。

  复制代码 代码如下:

  $('regpwd1').onkeyup = function(){

  pwd = $('regpwd1').value;

  pwd2 = $('regpwd2').value;

  if(pwd.length < 6){

  $('pwdp1').innerHTML = '<font color=red>密码长度最少需要6位</font>';

  cpwd1 = '';

  }else if(pwd.length >= 6 && pwd.length < 12){

  $('pwdp1').innerHTML = '<font color=green>密码符合要求。密码强度:弱</font>';

  cpwd1 = 'yes';

  }else if((pwd.match(/^[0-9]*$/)!=null) || (pwd.match(/^[a-zA-Z]*$/) != null )){

  $('pwdp1').innerHTML = '<font color=green>密码符合要求。密码强度:中</font>';

  cpwd1 = 'yes';

  }else{

  $('pwdp1').innerHTML = '<font color=green>密码符合要求。密码强度:高</font>';

  cpwd1 = 'yes';

  }

  if(pwd2 != '' && pwd != pwd2){

  $('pwdp2').innerHTML = '<font color=red>两次密码不一致!</font>';

  cpwd2 = '';

  }else if(pwd2 != '' && pwd == pwd2){

  $('pwdp2').innerHTML = '<font color=green>密码输入正确</font>';

  cpwd2 = 'yes';

  }

  chkreg();

  }

  二次密码判断比较简单,只要判断第二次输入密码是否和第一次输入相等。

  复制代码 代码如下:

  $('regpwd2').onkeyup = function(){

  pwd1 = $('regpwd1').value;

  pwd2 = $('regpwd2').value;

  if(pwd1 != pwd2){

  $('pwdp2').innerHTML = '<font color=red>两次密码不一致!</font>';

  cpwd2 = '';

  }else{

  $('pwdp2').innerHTML = '<font color=green>密码输入正确</font>';

  cpwd2 = 'yes';

  }

  chkreg();

  }

  上面是必须填写信息,如果用户希望填写更详细的资料,可单击"详细资料按钮"

  复制代码 代码如下:

  $('morebtn').onclick = function(){

  if($('morep').style.display == ''){

  $('morep').style.display = 'none';

  }else{

  $('morep').style.display = '';

  }

  }

  E-mail格式验证,输入字符串中必须包含@和.,同时这两个字符串的位置既不能在首尾也不能连在一起

  复制代码 代码如下:

  $('email').onkeyup = function(){

  emailreg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

  $('email').value.match(emailreg);

  if($('email').value.match(emailreg) == null){

  $('emailp').innerHTML = '<font color=red>错误的email格式</font>';

  cemail = '';

  }else{

  $('emailp').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;

  ?>

【基于PHP+Ajax实现表单验证的详解】相关文章:

如何实现php登陆表单提交CSRF及验证码03-24

JavaScript重置表单的实现03-23

ThinkPHP中create()方法自动验证表单信息03-03

PHP中Yii框架之表单验证规则03-02

php如何实现验证码11-26

如何实现PHP获取表单数据与HTML嵌入PHP脚本03-25

PHP如何实现注册后邮箱验证和帐号激活03-13

PHP中读取大文件实现方法详解11-30

php三种实现多线程类似的详解11-16