<!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: 417 ????????????// ???????},18 ????????????// ???????email: {19 ????????????// ???????????required: true,20 ????????????// ???????????email: true21 ????????????// ???????},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+965 ????????<p>66 ????????????<input type="submit" name="tijiao" value="提交" />67 ????????</p>68 ????</form>69 </body>70 </html>jQuery之Validation表单验证插件使用
原文地址：http://www.cnblogs.com/pang951189/p/7744979.html