表单验证之JQuery Validate控件

Posted 2020-09-27 Dreamice

概述

jQuery Validation Plugin v1.14.0，基于JQuery，官网http://jqueryvalidation.org/

该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误提示信息，且已翻译成其他 37 种语言，调用插件包就可以切换为中文等语言。

其他控件parsley.js Version 2.3.9，该插件是基于javascript语言的，官网http://parsleyjs.org，在此不做研究。

引用插件

<script src="${base!}/assets/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>

<script src="${base!}/assets/global/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>

<script   src="${base!}/assets/global/plugins/jquery-validation/js/localization/messages_zh.min.js" type="text/javascript"></script>

jquery.validate.min.js中包括插件基本验证规则；

additional-methods.min.js这个文件中有扩展的验证规则，以及添加新的验证规则需要写在该文件中；

messages_zh.min.js是提示信息汉字包；

添加自定义验证规则

代码示例

部分验证框，样式设置在公用css中

 1 <div class="form-group  margin-top-20">
 2                                   <label class="control-label col-md-3">姓名
 3                                       <span class="required"> * </span>
 4                                   </label>
 5                                   <div class="col-md-4">
 6                                       <div class="input-icon right">
 7                                           <i class="fa"></i>
 8                                           <input type="text" class="form-control" name="name" /> </div>
 9                                   </div>
10                               </div>
11                               <div class="form-group  margin-top-20">
12                                   <label class="control-label col-md-3">昵称
13                                       <span class="required"> * </span>
14                                   </label>
15                                   <div class="col-md-4">
16                                       <div class="input-icon right">
17                                           <i class="fa"></i>
18                                           <input type="text" class="form-control" name="nickname" /> </div>
19                                   </div>
20                               </div>
21                               <div class="form-group">
22                                   <label class="control-label col-md-3">邮箱
23                                       <span class="required"> * </span>
24                                   </label>
25                                   <div class="col-md-4">
26                                       <div class="input-icon right">
27                                           <i class="fa"></i>
28                                           <input type="text" class="form-control" name="email" /> </div>
29                                   </div>
30                               </div>
31                               <div class="form-group">
32                                   <label class="control-label col-md-3">手机
33                                       <span class="required"> * </span>
34                                   </label>
35                                   <div class="col-md-4">
36                                       <div class="input-icon right">
37                                           <i class="fa"></i>
38                                           <input type="text" class="form-control" name="mobile" /> </div>
39                                       <span class="help-block"></span>
40                                   </div>
41                               </div>

验证JS

 1 function JqValidate()
 2           {
 3               return $( ‘#formLogin‘ ).validate({
 4 
 5                 errorElement: ‘span‘, //default input error message container
 6                 errorClass: ‘help-block help-block-error‘, // default input error message class
 7                 focusInvalid: false, // do not focus the last invalid input
 8                 ignore: "",  // validate all fields including form hidden input
 9                 rules: {//校验规则
10                     name: {
11                         required: true,
12                          zhongwen:true,
13                          minlength:2,
14                          maxlength:15,
15                     },
16                     nickname: {                       
17                         required: true,
18                         NickName:true
19                     },
20                     email: {
21                         required: true,
22                         email: true
23                     },                    
24                     mobile:{
25                         required: true,
26                         isMobile:true,                        
27                     },
28                     phone:{
29                         required: true,
30                         isPhone:true,                        
31                     },
32                     IDcard:{
33                         required: true,
34                         isIDCard:true,                        
35                     },
36                   
37                     creditcard: {
38                         required: true,
39                         creditcard: true
40                     },
41                 },
42                 messages: {    //自定义提示信息              
43                     name: {
44                       required: "请输入姓名",
45                       minlength: "姓名至少由两个汉字组成",
46                       maxlength: "姓名不超过15个汉字"
47                     },                  
48                     email: "请输入一个正确的邮箱",  
49                     gender:"必须选择一个性别属性",
50                     agree:"请接受我方条款",
51                   },                
52                 errorPlacement: function (error, element) { // 错误信息显示位置
53                     var icon = $(element).parent(‘.input-icon‘).children(‘i‘);
54                     icon.removeClass(‘fa-check‘).addClass("fa-warning");  
55                     icon.attr("data-original-title", error.text()).tooltip({‘container‘: ‘body‘});
56                 },
57 
58                 highlight: function (element) { // 高亮显示错误（错误变红）
59                     $(element)
60                         .closest(‘.form-group‘).removeClass("has-success").addClass(‘has-error‘); // set error class to the control group   
61                 },
62 
63                 unhighlight: function (element) { // revert the change done by hightlight
64                     
65                 },
66 
67                 success: function (label, element) {//数据正确输入后由红色编程绿色
68                     var icon = $(element).parent(‘.input-icon‘).children(‘i‘);
69                     $(element).closest(‘.form-group‘).removeClass(‘has-error‘).addClass(‘has-success‘); // set success class to the control group
70                     icon.removeClass("fa-warning").addClass("fa-check");
71                 },
72 
73                 submitHandler: function (form) {
74                     alert("数据校验正确!");                       
75                     //form[0].submit(); // submit the form
76                 }
77               });
78           }

 

效果

参考网站