概述
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 }
效果
参考网站
时间： 2024-10-06 16:49:10