jQuery Validation前端表单验证插件

概述

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

快速上手

页面引用（注意前提要先引用JQuery）

<%-- jQuery Validation Plugin - v1.14.0  Begin--%>

实现小案例

	

		

			商品标题
			

						
							
						
				
			
		
		
	
	

		提交
		返回
	

默认校验规则说明

• 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

自定义封装校验器

/**
 * 函数对象
 * @constructor
 */

var Validate = function () {
    /**
     * 初始化检验规则
     * 初始化 JQuery validate
     * 私有的
     */
    var handlerInit = function () {
        //自定义校验规则
        $.validator.addMethod("mobile", function (value, element) {
            var length = value.length;
            var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "手机号码格式错误");
    };

    /**
     * 表单验证
     * @param formId
     */
    var handlerValidate = function (formId,rules) {
        $("#" + formId).validate({
            errorElement: 'span',
            errorClass: 'help-block',
            errorPlacement: function (error, element) {
                element.parent().parent().attr("class", "form-group has-error");
                error.insertAfter(element);
            },
            /**
             * 自定义规则
             */
            rules:{
                username:{
                    minlength: 2

                },
                rePassword:{
                    equalTo:"#newPassword"
                }
            },
            /*如果没有写messages 则使用默认*/
            messages:{
                rePassword:{
                    equalTo: "两次密码输入不一致"
                }
            }
        });
    };

    return {
        /**
         * 表单验证
         * @param formId
         */
        validateForm: function (formId,rules) {
            handlerInit();
            handlerValidate(formId,rules);
        }
    }
}();

$(document).ready(function () {
    Validate.validateForm("inputForm");
    Validate.validateForm("pwdForm");
    Validate.validateForm("new_modify_Form");
});