使用 validate 进行输入验证

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>