表单增量验证
JavaScript代码：
1 /** 2 * JQuery+原生JavaScript 3 */ 4 $(document).ready(function() { 5 $("#btnSignUp").attr("disabled", true); //禁用注册按钮 6 //为每个待验证的字段添加onchange事件 7 $("input.validation").each(function() { 8 //为input 添加valid属性,并设定初值为false 9 this.valid = false; 10 $(this).change(function(){ 11 validateField(this); //验证输入的是否合法 12 }); 13 }) 14 }); 15 /** 16 * ajax：由服务器判断字段是否合法 17 * 改变valid属性值 18 * @param {DOM} node 19 */ 20 function validateField(node) { 21 var url = "formValidate.php?"+node.name+"="+node.value; 22 //var data = {$("node").attr("name"):encodeURIComponent($("node").val())}; 23 //怎样确定是否执行成功,$.ajax替换提示错误 24 $.get(url, function(data) { 25 //处理返回成功的数据 26 //根据返回的数据判断输入是否合法 27 var arrInfo = data.split("||"); 28 var $img = $(node).next("img"); //错误图标 29 //应先判断数组是否为空 30 //------ 31 if (!eval(arrInfo[0])) { 32 //输入的数据不合法 33 $img.attr("title", arrInfo[1]); //提示的错误信息 34 //$img.css("display", ""); //css改不动！！ 35 $img.show(); //显示错误图标,直到输入合法 36 node.valid = false; //改变valid值 37 }else { 38 $img.hide(); //隐藏错误图标 39 node.valid = true; 40 } 41 $("#btnSignUp").attr("disabled", !isFormValid()) 42 }); 43 } 44 /** 45 * 根据valid的属性值,判断表单是否可以提交 46 * 如果有错误不能提交的 47 * @return boolean 48 */ 49 function isFormValid() { 50 var btnValid = true; 51 $("input.validation").each(function() { 52 btnValid = btnValid && this.valid; //有一个false全部false 53 console.log(this.valid); 54 }) 55 return btnValid; 56 } 57 /** 58 * 这个函数有待扩展 59 * @param {} data 60 * @param {} statusText 61 * @param {} jqXHR 62 */ 63 function saveResult(data, statusText, jqXHR) { 64 if (statusText == 'success'){ 65 //1、可以判断data是否为空 66 //2、书本的方法 67 var arrInfo = data.split("||"); 68 69 } 70 }
后台脚本处理代码PHP
1 <?php 2 //表单增量验证 3 /** 4 * 只有用户名是否存在需要后台判断，其他只需js就可以了 5 * js下载也需要时间的。。。 6 */ 7 header("Content-type:text/html; charset=utf-8"); 8 $valid = FALSE; //表单是否合法 9 $message = "An unknown error occurred"; 10 //只能判断null or true 11 //$username = isset($_GET['username']) or $_GET['username']; 12 if (isset($_GET['username'])) { 13 $username = $_GET['username']; 14 //检查用户名是否合法(长度、已占) 15 $usernames = array(); //存储虚拟数据 16 $usernames[] = 'mackxu'; 17 $usernames[] = 'Tom'; 18 $usernames[] = 'Jim'; 19 $usernames[] = 'Jane'; 20 21 if (in_array($username, $usernames)) { 22 $message = "用户名已存在"; 23 } elseif (strlen($username) < 6) { 24 $message = "用户名不能少于6个字符"; 25 } else { 26 $valid = TRUE; 27 $message = ''; 28 } 29 } elseif (isset($_GET['password'])) { 30 $password = $_GET['password']; 31 //检查密码长度是否大于6 32 if (strlen(trim($password)) < 6) { 33 $message = "密码太短, 不安全"; 34 }elseif (strlen(trim($password)) > 12){ 35 $message = "密码过长"; 36 }else { 37 $valid = TRUE; 38 $message = ''; 39 } 40 } elseif (isset($_GET['confirePassword'])) { 41 //判断确认密码是否正确 42 //这个有问题，因为每次只发送一个键值对故不知道$password 43 /*$confirePassword = $_GET['confirePassword']; 44 if ($confirePassword != $password){ 45 $message = '两次输入密码不一致'; 46 }else { 47 $valid = TRUE; 48 $message = ''; 49 }*/ 50 $valid = TRUE; 51 $message = ''; 52 53 } elseif (isset($_GET['email'])) { 54 $email = $_GET['email']; 55 //判断邮箱是否合法 56 $pattern = '/^[_a-z0-9-]+(\.[_a-z0-9-])*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/'; 57 if ( !preg_match($pattern, $email) ) { 58 $message = "邮箱不可用"; 59 }else { 60 $valid = TRUE; 61 $message = ''; 62 } 63 64 } elseif (isset($_GET['birthday'])) { 65 66 $date = strtotime($_GET['birthday']); 67 if (!is_numeric($date) or $date <0) { 68 $message = "输入的日期不合法"; 69 }else { 70 $valid = TRUE; 71 $message = ''; 72 } 73 74 } 75 echo "$valid || $message"; //由值决定js的执行 76
