validate 官方教程网址：
http://www.runoob.com/jquery/jquery-plugin-validate.html
在表单页面引入两个核心 js 文件
#官方的两个文件
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
#参考官方封装的一个 js 文件
<script src="http://www.***.com/assets/validate/msg.js"></script>
msg.js 代码如下：
$.extend($.
validator.messages, {
required:
"<b style='color:red;font-
size:
16px;
'>＊ 这是必填字段</b>",
remote:
"<b style='color:red;font-
size:
16px;
'>＊ 请修正此字段</b>",
email:
"<b style='color:red;font-
size:
16px;
'>＊ 请输入有效的电子邮件地址</b>",
url:
"<b style='color:red;font-
size:
16px;
'>＊ 请输入有效的网址</b>",
date:
"<b style='color:red;font-
size:
16px;
'>＊ 请输入有效的日期</b>",
dateISO:
"<b style='color:red;font-
size:
16px;
'>＊ 请输入有效的日期 (YYYY-MM-DD)</b>",
number:
"<b style='color:red;font-
size:
16px;
'>＊ 请输入有效的数字</b>",
digits:
"<b style='color:red;font-
size:
16px;
'>＊ 只能输入正整数或0</b>",
creditcard:
"<b style='color:red;font-
size:
16px;
'>＊ 请输入有效的信用卡号码</b>",
equalTo:
"<b style='color:red;font-
size:
16px;
'>＊ 你的输入不相同</b>",
extension:
"<b style='color:red;font-
size:
16px;
'>＊ 请输入有效的后缀</b>",
maxlength: $.
validator.format(
"<b style='color:red;font-
size:
16px;
'>＊ 最多可以输入 {0} 个字符</b>"),
minlength: $.
validator.format(
"<b style='color:red;font-
size:
16px;
'>＊ 最少要输入 {0} 个字符</b>"),
rangelength: $.
validator.format(
"<b style='color:red;font-
size:
16px;
'>＊ 请输入长度在 {0} 到 {1} 之间的字符串</b>"),
range: $.
validator.format(
"<b style='color:red;font-
size:
16px;
'>＊ 请输入范围在 {0} 到 {1} 之间的数值</b>"),
max: $.
validator.format(
"<b style='color:red;font-
size:
16px;
'>＊ 请输入不大于 {0} 的数值</b>"),
min: $.
validator.format(
"<b style='color:red;font-
size:
16px;
'>＊ 请输入不小于 {0} 的数值</b>")
});
$.
validator.setDefaults({
submitHandler:
function() {
return true;
}
});
$().ready(
function() {
$(
"#signupForm").validate();
});
使用方式：
//上面我们引入了三个 js 文件。
//给 form 表单命名个 id 为 signupForm。
//根据 msg.js 里面的提示，不要求范围的直接 属性='true'，就能调用验证。
<form id="signupForm" action="" method="post">
<p>
<input required="true" rangelength="1,15" type="text" />
</p>
</form>
