标签：
简单地使用jquery的validate
——@梁WP
摘要：本文通过一个很简单的例子，讲解了jquery validate的最基础使用方式。
一、源代码
注意事项都写在代码的注释里了，哈哈。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>lwp</title> <!-- jquery，必须 --> <script type="text/javascript" src="jquery-1.11.2.js"></script> <!-- jquery的校验，必须 --> <script type="text/javascript" src="jquery.validate.js"></script> <!-- 额外下载的校验规则大全，可选 --> <script type="text/javascript" src="additional-methods.js"></script> <script> $(function() { /* 让表单使用jquery-validate的校验，必须 */ $("form").validate(); /* 用中文覆盖jquery-validate原有的英文提示，可选 */ jQuery.extend(jQuery.validator.messages, { required : "不能为空", email : "请输入正式的邮箱" }); /* 自定义校验规则，可选 */ jQuery.validator.addMethod("lwp", function(value, element) { if (value == "" || value == "liang") { return true; } else { return false; } }, "只能输入liang"); }); function check(){ /* 检查表单 */ if($("form").valid()) { alert("提交成功"); } else { return false; } } </script> <style> /* 自定义的错误提示样式，覆盖jquery-validate自带的错误提示样式，可选 */ label.error { color: #F00; font-size: 12px; } </style> </head> <body> <form> <div> <label for="email">邮箱</label> <!-- required和email是jquery-validate自带的校验规则 --> <input type="text" autocomplete="off" name="email" required="true" email="true"> </div> <div> <label for="author">作者</label> <!-- lwp是自己定义的校验规则 --> <input type="text" autocomplete="off" name="author" required="true" lwp="true"> </div> <div> <input type="button" onclick="check();" value="提交"> </div> </form> </body> </html>
二、结果截图
1、required的校验，截图如下：
2、email和lwp的校验，截图如下：
3、校验通过之后的提交，截图如下：
标签：
原文地址：http://www.cnblogs.com/liangweiping/p/4510774.html
