jQuery之Validation表单验证插件使用
<!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>
