Jquery插件-Validate使用方式

非form表单提交

validate插件默认使用submit方式提交

• 引入jquery.validate插件

 <script src="../js/jquery.min.js"></script>
<script src="../js/jquery.1.14.validate.min.js"></script>

• 自定义错误提示文件

<script src="../locale/messages_zh.js"></script> 

资源文件内容如下

(function (factory) {
    if (typeof define === "function" && define.amd) {
        define(["jquery", "../jquery.validate"], factory);
    } else {
        factory(jQuery);
    }
}(function ($) {

    /*
     * Translated default messages for the jQuery validation plugin.
     * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
     */
    $.extend($.validator.messages, { required: "这是必填字段", remote: "请修正此字段", email: "请输入有效的电子邮件地址", url: "请输入有效的网址", date: "请输入有效的日期", dateISO: "请输入有效的日期 (YYYY-MM-DD)", number: "请输入有效的数字", digits: "只能输入数字", creditcard: "请输入有效的信用卡号码", equalTo: "你的输入不相同", extension: "请输入有效的后缀", maxlength: $.validator.format("最多可以输入 {0} 个字符"), minlength: $.validator.format("最少要输入 {0} 个字符"), rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"), range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"), max: $.validator.format("请输入不大于 {0} 的数值"), min: $.validator.format("请输入不小于 {0} 的数值") });

}));

• 业务js文件使用jquery validate

$(document).ready(function () {
    $("#bind1_submit").bind('click', diving_license_bind)
})
点击事件
function diving_license_bind() {
    if (validateForm()) {
        console.log("validate ok")
    } else {
        console.log("fails to validate")
    }
}
在点击事件中，进行表单验证
function validateForm() {
    //validate方法参数可选
    return $("#diving_license_bind_form").validate({
        rules: {
            diving_license_no: "required",
            diving_license_archive_suffix: {
                required: true,
                minlength: 4,
                maxlength: 4
            }
        },
        //showErrors: showErrors
    }).form();
}