jQuery Validate 使用

文章目录

简要说明


jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。

该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现,并一直更新至今。截至本文发布日,最新版本为 1.19.1。

官方网址:http://jqueryvalidation.org

GitHub:https://github.com/jquery-validation/jquery-validation

导入文件

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validation/jquery.validate.js"></script>

<!-- jQuery Validate 提供的验证规则 -->
<script type="text/javascript" src="jquery.validation/validate-methods.js"></script>

<!-- 自定义验证规则 -->
<script type="text/javascript" src="jquery.validation/additional-methods.js"></script>

<!-- Ajax 提交使用 -->
<script type="text/javascript" src="jquery.form.js"></script>

示例展示

<form id="fm" method="post" action="/brand/store">
    <div class="form-group form-group-spe">
        <label class="input-left">
            <span class="color-red">*</span> <span>名字:</span>
        </label>
        <div class="form-control-box">
            <input type="text" class="form-control" name="name">
        </div>
    </div>
    <div class="form-group form-group-spe">
        <label class="input-left">
            <span>手机号:</span>
        </label>
        <div class="form-control-box">
            <input type="text" class="form-control" name="phone">
        </div>
    </div>
    <div class="act">
        <input type="submit" value="保存收货地址">
    </div>
</form>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validation/jquery.validate.js"></script>
<script type="text/javascript" src="jquery.validation/validate-methods.js"></script>
<script type="text/javascript" src="jquery.validation/additional-methods.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$("#fm").validate({
    rules: {
        name: {required: true},
        phone: {required: true, phoneCN: true},
    },
    messages: {
        name: '名字不能为空',
        phone: {
            required: '手机号不能为空',
            phoneCN: '手机号格式不正确',
        },
    },
    submitHandler:function(){
        $("#fm").ajaxSubmit(function(data) {
            console.log(data);
        });
    }
});
</script>

若验证不通过,会在每个验证元素的当前节点后附加 html 错误信息:

<label id="name-error" class="error" for="name">名字不能为空</label>

配置选项

$.validator.setDefaults({
    ignore: [], // 忽略某些元素不验证
    onfocusout: false, // 失去焦点时验证
    onkeyup: false, // 在 keyup 时验证
    onclick: false, // 在点击复选框和单选按钮时验证
    focusInvalid: false, // 提交表单后,未通过验证的表单会获得焦点
    errorLabelContainer: ".error-info", // 把错误信息统一放在一个容器里面
    wrapper: "li", // 用什么标签再把上边的 errorELement 包起来
    showErrors:function(errorMap, errorList) { // 显示总共有多少个未通过验证的元素
        this.defaultShowErrors();
        if(errorList.length > 0) {
            $(".error-info").show().delay(1500).hide(300);
        }
    },
})

jQuery Validate 提供了许多可选项配置,如: onkeyup:类型 Boolean,默认 true,指定是否在敲击键盘时验证; onclick:类型 Boolean,默认 true,指定是否在鼠标点击时验证;等等。可在 文档 中查看更多配置选项详情。

自定义校验

addMethod:name, method, message

上面案例中,我们在 additional-methods.js 文件中添加了一个手机号格式验证 phoneCN

// 自定义手机号格式验证
$.validator.addMethod("phoneCN", function(value, element) {
    return this.optional(element) || /^1[3456789]\d{9}$/.test(value);
}, "手机号格式错误");

注意:要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建议写在 additional-methods.js 文件中。

参考信息

原文链接:,转发请注明来源!

发表评论