Jquery.validate.js表单验证详解(2)_H5之家 - 中国HTML5教程资源分享第一站

首先，页面初始化完成时，调用表单验证接口 validate_interface

封装好的表单验证接口+Ajax请求接口+关闭layer弹框接口。

接下来用插件自带的invalidHandler得出有多少个标签不通过验证。再利用noty插件弹出提示信息。这里我简单看了noty插件，直接会用就行了。

看我下面的代码closest是什么意思，嗯，当时我也不知道，后来去查了下JQ，知道是从当前标签一层一层外外找，直至找到。

$(element).closest('.selectpicker')

这句代码的意思是从当前标签一层一层往外找，直至找到class="selectpicker"的标签。

看我接口的代码会发现有highlight、success 的一些方法。这主要是因些我的form表单用了bootstrap-select插件来美化select标签，但是jquery.validate.js无法验证bootstrap-select的select标签，只能在提交表单时才会验证。这是个很奇葩的坑，我跳进出很久都出不来。网上stackoverflow看了很多解决方法，也没有什么用，是我姿势不对？

后来在一篇stackoverflow找到解决方法

form_obj.find("select").on('change', function(e) { console.log($(this)); // 手动调用select标签 $('.form-horizontal').validate().element($(this)); });

当验证不通过时，给标签(class:my-validate)加上has-error has-feedback属性，这样标签的边框就会变红。

$(element).closest('.my-validate').addClass('has-error has-feedback');

当验证通过时，移除对应的样式

label.closest('.my-validate').removeClass('has-error has-feedback'); 二、以下是接口的代码，希望对你有帮助： 1 // 封装好的表单验证接口与ajax请求 2 function validate_interface(form_obj){ 3 form_obj.validate({ 4 invalidHandler: function(event, validator) { 5 // 验证不通过的数量 6 var errors = validator.numberOfInvalids(); 7 if (errors) { 8 console.log("errors", errors); 9 var msg = errors == 1 ? "你有 1 个必填字段未填，已经加红显示." : "你有 " + errors + " 个必填字段未填，已经加红显示。"; 10 console.log("msg", msg); 11 noty({ 12 text: msg, 13 type: "error", 14 timeout: 1500 15 }); 16 } 17 }, 18 highlight : function(element) { 19 console.log(element.tagName); 20 $(element).closest('.my-validate').addClass('has-error has-feedback'); 21 $(element).closest('.selectpicker').selectpicker('refresh'); 22 }, 23 //验证通过的处理 24 success : function(label) { 25 console.log("label", label); 26 label.closest('.my-validate').removeClass('has-error has-feedback'); 27 28 }, 29 30 submitHandler: function(form) { 31 console.log("form", form); 32 // ajax request after form validate true! 33 ajax_func(); 34 35 } 36 37 38 }); 39 40 41 form_obj.find("select").on('change', function(e) { 42 console.log($(this)); 43 $('.form-horizontal').validate().element($(this)); 44 }); 45 46 // 点击弹出框的确认按钮调用该函数 47 function ajax_func() { 48 var ajax_post_url = form_obj.attr("ajax_post_url"); 49 console.log("form_msg", form_obj.serialize()); 50 $.ajax({ 51 url: ajax_post_url, // 提交的页面 52 data: form_obj.serialize(), // 从表单中获取数据 53 type: "POST", // 设置请求类型为"POST"，默认为"GET" 54 error:function (jqXHR, textStatus, errorThrown) { 55 alert(jqXHR.responseText); 56 alert(jqXHR.status); 57 }, 58 success: function(data) { 59 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 60 console.log("index", index); 61 parent.layer.close(index); //再执行关闭 62 alert("提交成功"); 63 } 64 }); 65 } 66 } 67 68 69 // interface of close layer 70 function close_layer() { 71 console.log("layer inter close"); 72 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 73 parent.layer.close(index); //再执行关闭 74 return false; 75 }

验证一通过则发起ajax请求，ajax请求成功扣则关闭当前layer弹框，对layer不了解的可以看我下篇博客……

三、自定义验证

接下来又有个新需求，DBA腾哥要我验证表单，比如用户输入只能由字母、数字、下划线组成……还有IP地址，发须是IP的格式才能通过验证，给后台发起请求。

这就需要自定义表单验证方法，比如你想验证文本框验证的是不是IP地址，可以自定义表单验证方法，自己写正则表达式进行匹配，匹配不通过是显示自定义的错误信息。

1 // layer.ready(callback) - 初始化就绪 2 $(document).ready(function () { 3 var form_obj = $("#edit_workflow"); 4 5 validate_interface(form_obj); // 调用包装好的接口进行表单验证与ajax请求 6 7 var url = location.search; 8 $("#url").val(url); 9 10 // my first validator function 11 jQuery.validator.addMethod("my_first_validator", function(value, element) { 12 return this.optional(element) || /^[a-zA-Z0-9_]+$/.test(value); 13 }, "用户名只能由字母、数字、下划线组成"); 14 15 // my second validator function 16 jQuery.validator.addMethod("my_second_validator", function(value, element) { 17 return this.optional(element) || /^[^\s]*$/.test(value); 18 }, "密码不能包含空格"); 19 20 // my third validator function 21 jQuery.validator.addMethod("my_third_validator", function(value, element) { 22 // 正则匹配文本框的IP 23 return this.optional(element) || /^(\s)*(([0-9]{1,3}\.){3}[0-9]{1,3}(\s)*)+(\s)*$/.test(value); 24 }, "ip格式不对，多个ip请用换行符分开!"); 25 26 });

至此，表单验证ending，如果你是第一次了解表单验证，想必你看完这篇博客也是一脸蒙逼的，你应该看了官网，我下面选了jquery.validate.js官网我觉得我有必要记录的一部分。可以看看，不爽就自己去看官网。