表单验证之JQuery Validate控件
2021-07-02 12:06
标签：origin validate tip field 英语 addition 概述 not 编程 jQuery Validation Plugin v1.14.0，基于JQuery，官网http://jqueryvalidation.org/ 该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误提示信息，且已翻译成其他 37 种语言，调用插件包就可以切换为中文等语言。 其他控件parsley.js Version 2.3.9，该插件是基于JavaScript语言的，官网http://parsleyjs.org，在此不做研究。 jquery.validate.min.js中包括插件基本验证规则； additional-methods.min.js这个文件中有扩展的验证规则，以及添加新的验证规则需要写在该文件中； messages_zh.min.js是提示信息汉字包； 添加自定义验证规则 部分验证框，样式设置在公用css中 验证JS 表单验证之JQuery Validate控件 标签：origin validate tip field 英语 addition 概述 not 编程 原文地址：http://www.cnblogs.com/Dreamice/p/7127963.html概述
引用插件
代码示例
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>
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 }
效果
参考网站
上一篇：nodeJs建立简单的服务器
下一篇：php mongo类