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>

代码详情如下：

 <!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>