jQuery validation

 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 &nbsp; as text for IE 46                 label.html("&nbsp;").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 lastname122         $("#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 demo131         var newsletter = $("#newsletter");132         // newsletter topics are optional, hide at first133         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 checked137         newsletter.click(function() {138             topics[this.checked ? "removeClass" : "addClass"]("gray");139             topicInputs.attr("disabled", !this.checked);140         });141     });142     </script>