标签：
引用:http://www.runoob.com/jquery/jquery-plugin-validate.html
validation demo 下载地址:https://github.com/jzaefferer/jquery-validation/releases
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
默认校验规则
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期 日期校验ie6出错，慎用
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
1 defaults: { 2 messages: {},//自定义的提示信息key:value的形式key是要验证的元素,值是字符串或函数 3 groups: {},//对一组元素的验证,用一个错误提示,用error Placement控制把出错信息放在哪里 4 rules: {},//自定义规则,key:value的形式,key是要验证的元素,value可以是字符串或对象 5 errorClass: "error",//指定错误提示的css类名，可以自定义错误提示的样式 6 pendingClass: "pending", 7 validClass: "valid", 8 errorElement: "label",//用什么标签标记错误，默认的是label 9 focusCleanup: false,//如果是true那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用 10 focusInvalid: true,//提交表单后，未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点 11 errorContainer: $( [] ),//显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大.errorContainer: "#messageBox1, #messageBox2" 12 errorLabelContainer: $( [] ),//把错误信息统一放在一个容器里面。 13 onsubmit: true,//提交时验证. 设置唯false就用其他方法去验证 14 ignore: ":hidden",//忽略某些元素不验证 15 ignoreTitle: false,
1 <script src="../dist/localization/messages_zh.js" type="text/javascript"></script> 2 <script> 3 4 //自定义验证方法 5 // 中文字两个字节 6 jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { 7 var length = value.length; 8 for(var i = 0; i < value.length; i++){ 9 if(value.charCodeAt(i) > 127){ 10 length++; 11 } 12 } 13 return this.optional(element) || ( length >= param[0] && length <= param[1] ); 14 }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)")); 15 16 // 邮政编码验证 17 jQuery.validator.addMethod("isZipCode", function(value, element) { 18 var tel = /^[0-9]{6}$/; 19 return this.optional(element) || (tel.test(value)); 20 }, "请正确填写您的邮政编码"); 21 22 $.validator.setDefaults({//默认 23 24 }); 25 26 $().ready(function() { 27 $("#commentForm").validate({ 28 debug:true,//如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便 29 errorContainer: $(‘div.container‘), 30 errorLabelContainer: $("ol", container), 31 wrapper: ‘li‘,//用什么标签再把上边的errorELement包起来 32 errorPlacement: function(error, element) {//跟一个函数,可以自定义错误放到哪里 33 error.appendTo(element.parent());//1.默认把错误信息放在验证的元素后面 34 //2. Append error within linked label 35 $( element ).closest( "form" ).find( "label[for=‘" + element.attr( "id" ) + "‘]" ).append( error ); 36 //3. 37 if ( element.is(":radio") ) 38 error.appendTo( element.parent().next().next() ); 39 else if ( element.is(":checkbox") ) 40 error.appendTo ( element.next() ); 41 else 42 error.appendTo( element.parent().next() ); 43 }, 44 success: function(label) {//要验证的元素通过验证后的动作，如果跟一个字符串，会当做一个css类，也可跟一个函数 45 // set as text for IE 46 label.html(" ").addClass("checked"); 47 //label.addClass("valid").text("Ok!") 48 }, 49 submitHandler: function() {//通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交 50 form.submit(); 51 $(form).ajaxSubmit();//使用ajax方式 52 //通常情况下，我们直接通过form提交的话， 提交后当前页面跳转到form的action所指向的页面。然而，很多时候我们比不希望提交表单后页面跳转，那么，我们就可以ajaxSubmit(obj)来提交数据。 53 //ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法，所以使用此方法需要先引入这个插件。 54 //<script src="http://malsup.github.io/jquery.form.js"></script 55 /*$(this).ajaxSubmit({ 56 type: ‘post‘, // 提交方式 get/post 57 url: ‘your url‘, // 需要提交的 url 58 data: { 59 ‘title‘: title, 60 ‘content‘: content 61 }, 62 success: function(data) { // data 保存提交后返回的数据，一般为 json 数据 63 // 此处可对 data 作相关处理 64 alert(‘提交成功！‘); 65 } 66 $(this).resetForm(); // 提交后重置表单 67 });*/ 68 } 69 }); 70 71 // validate signup form on keyup and submit 72 $("#signupForm").validate({ 73 rules: {//自定义规则,key:value的形式,key是要验证的元素,value可以是字符串或对象 74 firstname: "required", 75 lastname: "required", 76 username: { 77 required: true, 78 minlength: 2 79 }, 80 password: { 81 required: true, 82 minlength: 5 83 }, 84 confirm_password: { 85 required: true, 86 minlength: 5, 87 equalTo: "#password" 88 }, 89 email: { 90 required: true, 91 email: true 92 }, 93 topic: { 94 required: "#newsletter:checked", 95 minlength: 2 96 }, 97 agree: "required" 98 }, 99 messages: {//自定义的提示信息key:value的形式key是要验证的元素,值是字符串或函数 100 firstname: "Please enter your firstname xc", 101 lastname: "Please enter your lastname xc", 102 username: { 103 required: "Please enter a username xc", 104 minlength: "Your username must consist of at least 2 characters xc" 105 }, 106 password: { 107 required: "Please provide a password xc", 108 minlength: "Your password must be at least 5 characters long xc" 109 }, 110 confirm_password: { 111 required: "Please provide a password xc", 112 minlength: "Your password must be at least 5 characters long xc", 113 equalTo: "Please enter the same password as above xc" 114 }, 115 email: "Please enter a valid email address xc", 116 agree: "Please accept our policy xc", 117 topic: "Please select at least 2 topics xc" 118 } 119 }); 120 121 // propose username by combining first- and lastname 122 $("#username").focus(function() { 123 var firstname = $("#firstname").val(); 124 var lastname = $("#lastname").val(); 125 if (firstname && lastname && !this.value) { 126 this.value = firstname + "." + lastname; 127 } 128 }); 129 130 //code to hide topic selection, disable for demo 131 var newsletter = $("#newsletter"); 132 // newsletter topics are optional, hide at first 133 var inital = newsletter.is(":checked"); 134 var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray"); 135 var topicInputs = topics.find("input").attr("disabled", !inital); 136 // show when newsletter is checked 137 newsletter.click(function() { 138 topics[this.checked ? "removeClass" : "addClass"]("gray"); 139 topicInputs.attr("disabled", !this.checked); 140 }); 141 }); 142 </script>
标签：
原文地址：http://www.cnblogs.com/ooo0/p/5889334.html
