form-validate-demo.js
3.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
//以下为修改jQuery Validation插件兼容Bootstrap的方法，没有直接写在插件中是为了便于插件升级
$.validator.setDefaults({
highlight: function (element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
success: function (element) {
element.closest('.form-group').removeClass('has-error').addClass('has-success');
},
errorElement: "span",
errorPlacement: function (error, element) {
if (element.is(":radio") || element.is(":checkbox")) {
error.appendTo(element.parent().parent().parent());
} else {
error.appendTo(element.parent());
}
},
errorClass: "help-block m-b-none",
validClass: "help-block m-b-none"
});
//以下为官方示例
$().ready(function () {
// validate the comment form when it is submitted
$("#commentForm").validate();
// validate signup form on keyup and submit
var icon = "<i class='fa fa-times-circle'></i> ";
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: icon + "请输入你的姓",
lastname: icon + "请输入您的名字",
username: {
required: icon + "请输入您的用户名",
minlength: icon + "用户名必须两个字符以上"
},
password: {
required: icon + "请输入您的密码",
minlength: icon + "密码必须5个字符以上"
},
confirm_password: {
required: icon + "请再次输入密码",
minlength: icon + "密码必须5个字符以上",
equalTo: icon + "两次输入的密码不一致"
},
email: icon + "请输入您的E-mail",
agree: {
required: icon + "必须同意协议后才能注册",
element: '#agree-error'
}
}
});
// propose username by combining first- and lastname
$("#username").focus(function () {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if (firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
});