[jQuery Validate]前端校验

前言

    jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。    该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。

导入JS

    jquery.js    jquery.validate.min.js

规则

    jQuery Validate 插件支持多种校验规则,当规则不符合约定规范时,会提示默认信息,我们可以重写插件的默认提示。

(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 : "必填项",        number : "请输入有效的数字",        digits : "只能输入数字",        maxlength : $.validator.format("最多输入 {0} 个字符"),        minlength : $.validator.format("最少输入 {0} 个字符")    });    $.validator.addMethod("checkLoginName", function(value, element) {        var tel = /^(?![0-9]+$)?(?![a-zA-Z]+$)?[0-9A-Za-z]{1,12}$/;        return this.optional(element) || (tel.test(value));    }, "仅支持由字母或数字");    jQuery.validator.addMethod("onlyletter", function(value, element) {        var tel = /^[A-Za-z]*$/;        return this.optional(element) || (tel.test(value));    }, "仅支持英文字符");    jQuery.validator.addMethod("mobileChk", function (value, element) {        var phone = /^1\d{10}$/;        return this.optional(element) || (phone.test(value));    }, "请输入有效的手机号码");}));

上面的示例中可以看到，我们重写了一部分默认提示，同时还可以增加校验规则，通过jQuery.validator.addMethod即可。

那么我们如何设置插件的一些默认方法呢？

$(document).ready(function(){    $.validator.setDefaults({        errorPlacement:function(error,element) {            var $errorPlacement = element.closest(".radio-list");            if (element.parent(".input-group").size() > 0) {                error.appendTo(element.parent(".input-group"));            }else if ($errorPlacement.size() > 0) {                error.appendTo($errorPlacement);                $("input[type='radio']").each(function(i,e){                    $(e).removeClass("error");                });            }        }    });});

我们通过$.validator.setDefaults重写了errorPlacement方法，这样就可以控制所有前端JS的错误信息元素。

Ajax

    一般很多场景下我们是通过ajax发送数据的,而不是button的submit,这个时候我们如何使用jQuery Validate来触发校验是否通过呢?

var flag = $("#form").valid();if(flag){//...}

前端示例

<form id="form">    <div class="form-body" style="padding-top: 0px !important;">        <div class="row row-margin">            <div class="row form-group">                <label class="control-label col-md-2 text-right">姓名：</label>                <div class="col-md-3 control-wrapper input-group">                    <input type="text" class="form-control" name="name"/>                </div>                <label class="control-label col-md-2 text-right">用户名：</label>                <div class="col-md-3 control-wrapper input-group">                    <input type="text" class="form-control" name="userName"/>                </div>            </div>        </div>    </div></form>

简单设置下错误提示样式

.error{    float: left;    display: inline-block !important;    padding: 3px 5px;    height: 20px;    line-height: 15px;    background-color: #ff0000;    padding: 3px 5px;}

至此，我们就可以简单的使用jQuery Validate来做前端校验了。