jQuery之Validation表单验证插件使用

2018-06-24 00:39:25来源：未知阅读 ()

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-3.2.1.js"></script>
<script src="jquery-validation-1.17.0/dist/jquery.validate.js"></script>
<script src="jquery.metadata.js"></script>
<script src="jquery-validation-1.17.0/dist/localization/messages_zh.js"></script>
<script>
$(function () {
//$("#addForm").validate({
// rules: {
// username: {
// required: true,
// minlength: 4
// },
// email: {
// required: true,
// email: true
// },
// address: "url",
// content: "required"
// }
//});
$("#addForm").validate({
rules: {
username: { required: true, minlength: 2 },
email: { required: true, email: true },
address: "url",
content: "required",
cvalcode: { formual: "7+9" }
}
});
});
$.validator.addMethod(
"formual",
function (value, element, param) {
return value == eval(param);
},
'请输入正确的结果'
);
</script>
</head>
<body>
<form action="#" method="post" id="addForm">
<p>
姓名：
<input type="text" name="username" value=" " />
</p>
<p>
电子邮件：
<input type="text" name="email" value=" " />
</p>
<p>
网址：
<input type="text" name="address" value=" " />
</p>
<p>
我的评论：
<textarea name="content"></textarea>
</p>
<label for="cvalcode">验证码</label>
<input type="text" name="cvalcode" id="cvalcode" value=" " />=7+9
<p>
<input type="submit" name="tijiao" value="提交" />
</p>
</form>
</body>
</html>

代码详情如下：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <script src="jquery-3.2.1.js"></script>
 7     <script src="jquery-validation-1.17.0/dist/jquery.validate.js"></script>
 8     <script src="jquery.metadata.js"></script>
 9     <script src="jquery-validation-1.17.0/dist/localization/messages_zh.js"></script>
10     <script>
11         $(function () {
12             //$("#addForm").validate({
13             //    rules: {
14             //        username: {
15             //            required: true,
16             //            minlength: 4
17             //        },
18             //        email: {
19             //            required: true,
20             //            email: true
21             //        },
22             //        address: "url",
23             //        content: "required"
24             //    }
25             //});
26             $("#addForm").validate({
27                 rules: {
28                     username: { required: true, minlength: 2 },
29                     email: { required: true, email: true },
30                     address: "url",
31                     content: "required",
32                     cvalcode: { formual: "7+9" }
33                 }
34             });
35         });
36         $.validator.addMethod(
37                 "formual",
38                 function (value, element, param) {
39                     return value == eval(param);
40                 },
41                 '请输入正确的结果'
42             );
43     </script>
44 </head>
45 <body>
46     <form action="#" method="post" id="addForm">
47         <p>
48             姓名：
49             <input type="text" name="username" value=" " />
50         </p>
51         <p>
52             电子邮件：
53             <input type="text" name="email" value=" " />
54         </p>
55         <p>
56             网址：
57             <input type="text" name="address" value=" " />
58         </p>
59         <p>
60             我的评论：
61             <textarea name="content"></textarea>
62         </p>
63         <label for="cvalcode">验证码</label>
64         <input type="text" name="cvalcode" id="cvalcode" value=" " />=7+9
65         <p>
66             <input type="submit" name="tijiao" value="提交" />
67         </p>
68     </form>
69 </body>
70 </html>