Jquery validation

前端表单验证框架

页面引入

<!-- jQuery Validation 1.14.0 -->
<script src="/static/assets/plugins/jquery-validation/js/jquery.validate.js"></script>
<script src="/static/assets/plugins/jquery-validation/js/additional-methods.js"></script>
<script src="/static/assets/plugins/jquery-validation/js/localization/messages_zh.js"></script>

默认校验规则

required：true 必输字段

remote：check.php 使用 ajax 方法调用 check.php 验证输入值

email：true 必须输入正确格式的电子邮件

url：true 必须输入正确格式的网址

date：true 必须输入正确格式的日期

dateISO：true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性

number：true 必须输入合法的数字(负数，小数)

digits：true 必须输入整数

creditcard： 必须输入合法的信用卡号

equalTo：#field，输入值必须和 #field 相同

accept： 输入拥有合法后缀名的字符串（上传文件的后缀）

maxlength：5，输入长度最多是5的字符串(汉字算一个字符)

minlength：10，输入长度最小是10的字符串(汉字算一个字符)

rangelength：[5,10]，输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)

range：[5,10]，输入值必须介于 5 和 10 之间

max：5，输入值不能大于 5

min：10，输入值不能小于 10

封装后检验器

//函数对象---相当于一个类
var Validate=function () {
    //类中的私有函数
    var handlerInitValidation=function () {
        //添加validate没有的校验功能

        /* 验证手机号 11位   13或15开头
         */
        $.validator.addMethod("mobile", function(value, element) {
            var length = value.length;
            var mobile =  /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "手机号码格式错误");
        /*
        * 验证密码 只能为 字母数字 下划线 6-16位
        */
        $.validator.addMethod("pwd", function(value, element) {
            var pwd = /^[a-zA-Z0-9_]{6,16}$/;
            return this.optional(element) || pwd.test(value);
        }, "请输入6-16位字母数字或下划线");
    };
    /**
     * 提取表单验证 通过id确认校验哪张表单  rules 定义不能写在class的规则 如长度
     * @param formId
     */
    var handlerValidate = function (formId,rules) {
    // var result=    此处返回的结果可以用来判断验证是否成功  result.valid()   true 成功 false 失败
        $("#" + formId).validate({
            //自定义验证的name属性值的要求 也可写在前端输入项class内 *前端都必须要有name
            rules:rules,
            //自定义验证失败提示(可不填,有默认的)
            messages:{
                rePwd:{
                    equalTo:"两次密码不一致"
                },
                oldPwd:{
                    required:"输入项不能为空"
                }
            },
            errorElement: 'span',
            errorClass: 'help-block',
            errorPlacement: function (error, element) {
                //element.parent().parent().attr("class", "form-group has-error");
                //找最近的form-group
                $(element).closest('.form-group').addClass('has-error');
                error.insertAfter(element);
            }
        });

    };
    //return返回的是对象 如 init
    return{
        //return里的是公有函数
        init: function () {
            handlerInitValidation();
        },
        /**
         * 表单验证
         * @param formId
         */
        validateForm: function (formId,rules) {
          // return  result
            handlerValidate(formId,rules);
        }
    }

}();

//导入js后自动执行
$(function () {
    Validate.init();
    //要校验的表单id设置为inputForm即可,有需要定义rules的表单时 在相应页面下 再调用这个函数的方法 把rules作为参数
    Validate.validateForm("inputForm")
});

自定义rules举例(校验用户长度等)

Validate.validateForm("inputForm",{
            username: {
                rangelength: [3, 10]   //class里写不了条件
            },
            rePwd:{
                //确认密码与新密码匹配  表单项id()
                equalTo: "#newPwd"
            }
        });
//其他项校验 直接写在表单项的class---如下

Example

<form id="inputForm" role="form" action="/profile/save" method="post">
    <input type="hidden" name="id" value="${sessionScope.user.id}"/>
    <div class="form-group">
        <label class="control-label">用户名</label>
        <input type="text" placeholder="${sessionScope.user.username}" value="${sessionScope.user.username}" name="username" class="form-control required " /> </div>
    <div class="form-group">
        <label class="control-label">邮箱</label>
        <input type="text" placeholder="${sessionScope.user.email}" value="${sessionScope.user.email}"  name="email" class="form-control required email" /> </div>
    <div class="form-group">
        <label class="control-label">手机号</label>
        <input type="text" placeholder="${sessionScope.user.phone}" value="${sessionScope.user.phone}"  name="phone"  class="form-control required mobile" /> </div>
    <div class="margiv-top-10">
        <input type="submit" value="保存" class="btn green"/>
    </div>
</form>