jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,还可以自己扩充自己的验证方法,并且对国际化也有很好的支
JQuery.validate.js 在表单验证中经常使用,初学,对于其中Remote的使用说明一下.
. 基本解释
JQuery主要用于DOM树和CSS树的检索和后面的操作的一套方法,JQuery.validate.js是对JQuery的一个插件,可以认为是对JQuery在某个特殊场景下的扩展,而Validate就是对表单验证提供的扩展。
. 场景解释
用户进行注册用户的时候,要异步的判断用户名是否存在,给出提示信息。
. 通过案例学习
Html和JavaScript结合的脚本.
<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <script src="https://www.jb51.net/includes/libraries/javascript/jquery.js" type="text/javascript" charset="utf-" ></script> <script src="https://www.jb51.net/includes/libraries/javascript/jquery.plugins/jquery.validate.js" type="text/javascript" charset="utf-"></script> <script type="text/javascript"> $().ready(function() { $("#signupForm").validate({ debug: false, onkeyup:false, /*忽略某些元素不做验证*/ //ignore: ".ignore", /* 更改错误信息显示的位置 Default: errorPlacement: function(error, element) { error.appendTo(element.parent()); } error.appendTo(element.parent()); */ /* submitHandle: function(form){ alert("submited!"); form.submit();}, */ rules: { /* firstname: { required: function(){ return true;}}, */ firstname: { required: true, remote: { url: "Learn.php", type: "post", //DataType: "json", data: { firstname: function(){ return $("#firstname").val(); } }}}, phonenum: { required: true, digits: true, rangelength: [,]}, email: { required: true, email: true}, password: { required: true, minlength: }, confirm_password: { required: true, minlength: , equalTo: "#password"} }, messages: { firstname: { required: "请输入姓名", remote: "请输入姓名,remote"}, phonenum: { required: "请输入手机号", digits: "存在字符,非法手机号", rangelength: "手机号位数不对"}, email: { required: "请输入Email地址", email: "请输入正确的email地址"}, password: { required: "请输入密码", minlength: jQuery.format("密码不能小于{}个字 符")}, confirm_password: { required: "请输入确认密码", minlength: "确认密码不能小于个字符", equalTo: "两次输入密码不一致不一致"} }, submitHandler: function(form){ alert("验证通过");} }); }); </script> </head> <body> <form method="post" action=""> <p> <label for="firstname">姓氏</label> <input /> </p> <p> <label for="phonenum">手机</label> <input /> </p> <p> <label for="email">邮件</label> <input /> </p> <p> <label for="password">密码</label> <input type="password" /> </p> <p> <label for="confirm_password">确认密码</label> <input type="password" /> </p> <p> <input type="submit" value="提交"/> </p> </form> </body> </html>
后台PHP代码 BaseFunction.php
<?php function WriteLog($msg) { $filename = dirname(__FILE__) ."\\Debug.log"; $handler = null; if (($handler = fopen($filename, 'ab+')) !== false) { fwrite($handler, "\n".'['.date('Y-m-d H:i:s').']'."\t".$msg); fclose($handler); } } function CheckUser($UserName) { if( $_REQUEST[$UserName] == 'php' ){ exit("false"); } else{ exit("true"); } } ?>
后台PHP代码 Learn.php
<?php require("BaseFunction.php"); CheckUser('firstname'); ?>