23 JavaScript 插件-----使用jQuery Validation实现表单验证

首先，下载jquery validation插件，放入你的项目中webapp/static/assets/plugins/...

1.页面引入

<!-- 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>

2.使用案例

关键点：

form的id为inputForm

邮箱为required,当不填的时候触发下面的js

 <form:form id="inputForm" class="form-horizontal" action="/saveUser" method="post" modelAttribute="tbUser">
       <div class="form-group">
          <label for="email" class="col-sm-2 control-label ">邮箱</label>
          <div class="col-sm-10 ">
            <form:input path="email" cssClass="form-control required " placeholder="邮箱"/>
          </div>
       </div>
</form>






$(function () {
    $("#inputForm").validate({
        errorElement: 'span',
        errorClass: 'help-block',

        errorPlacement: function (error, element) {
            element.parent().parent().attr("class", "form-group has-error");
            error.insertAfter(element);
        }
    });
});

3.默认校验规则说明

• 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

4.自定义校验规则

$.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));
}, "手机号码格式错误");

5.封装校验器的使用方法

原因：表单验证适用于所有的表单，封装在一个js中的话，只要在页面中引入了这个js就可以进行表单验证了

（1）webapp/static/assets/创建app/validate.js

/**
 * jQuery 有效性验证
 * @constructor
 */
// 函数对象
var Validate = function () {

    /**
     * 初始化校验规则
     */
    var handlerInit = function () {
        $.validator.addMethod("mobile", function (value, element) {
            var length = value.length;
            var mobile =  /[0-9-()（）]{7,18}/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "手机号码格式错误");

        $.validator.addMethod("email", function (value, element) {
            var length = value.length;
            var email =  /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
            return this.optional(element) ||  email.test(value);
        }, "邮箱格式错误");
    };
    /**
     * 表单验证
     * @param formId
     */
    var handlerValidate = function (formId) {
        $("#" + formId).validate({
            errorElement: 'span',
            errorClass: 'help-block',
            errorPlacement: function (error, element) {
                element.parent().parent().attr("class", "form-group has-error");
                error.insertAfter(element);
            }
        });
    };



    return {
        /**
         * 初始化校验规则
         */
        init: function () {
            handlerInit();
        },
        /**
         * 表单验证
         * @param formId
         */
        validateForm: function (formId) {
            handlerValidate(formId);
        }

    }
}();

$(function () {
    Validate.init();
    Validate.validateForm("inputForm");
});

（2）在页面中引入

<script src="/static/assets/app/validate.js"></script>

（3）为form增加验证规则

重点在于：form的id要与validate.js中对应、cssClass里的规则(required email mobile)

<form:form id="inputForm" class="form-horizontal" action="/saveUser" method="post" modelAttribute="tbUser">
                        <form:hidden path="id" />
                        <div class="box-body ">
                            <div class="form-group">
                                <label for="email" class="col-sm-2 control-label ">邮箱</label>
                                <div class="col-sm-10 ">
                                    <form:input path="email" cssClass="form-control required email" placeholder="邮箱"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="password" class="col-sm-2 control-label">密码</label>

                                <div class="col-sm-10">
                                    <input type="password" id="password" name="password" class="form-control required" placeholder="密码" value="${tbUser.password}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="username" class="col-sm-2 control-label">用户名</label>

                                <div class="col-sm-10">
                                    <form:input path="username" cssClass="form-control required" placeholder="用户名"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="phone" class="col-sm-2 control-label">手机号</label>

                                <div class="col-sm-10">
                                    <form:input path="phone" cssClass="form-control required mobile" placeholder="手机号"/>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer">
                            <button type="submit" class="btn btn-default">取消</button>
                            <button type="submit" class="btn btn-info pull-right">保存</button>
                        </div>
                        <!-- /.box-footer -->
                    </form:form>