jQuery验证加强

对于jQuery的验证框架发现最为重要的操作就是中文的信息提示没有到位,如果要设置中文提示,还是在validate()函数中进行相关的属性配置

解决开发框架中中文提示的问题

//在页面加载的时候进行事件绑定处理
$(function(){
    $("#myform").validate({
        //定义规则
        rules: {
            "member.mid": {
                required:true,
                rangelength:[5,15]
            }
        },
        //定义提示文字信息
        messages: {
            "member.mid" : {
                required:"用户名不允许为空",
                rangelength:$.validator.format("用户长度为{0}~{1}之间")
            }

        }
    });

});

一个项目中可能有300个表单,并且发现其中280个信息提示都是同一个内容.那么最好的解决方法是:如果不需要特别照顾的地方,使用公共资源,如果需要照顾的地地方使用特别的信息提示,这个时候单独定义一个提示信息的公共的js文件.

(function( factory ) {
	if ( typeof define === "function" && define.amd ) {
		define( ["jquery", "../jquery.validate"], factory );
	} else if (typeof module === "object" && module.exports) {
		module.exports = factory( require( "jquery" ) );
	} else {
		factory( jQuery );
	}
}(function( $ ) {

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
 */
$.extend( $.validator.messages, {
	required: "这是必填字段",
	remote: "请修正此字段",
	email: "请输入有效的电子邮件地址",
	url: "请输入有效的网址",
	date: "请输入有效的日期",
	dateISO: "请输入有效的日期 (YYYY-MM-DD)",
	number: "请输入有效的数字",
	digits: "只能输入数字",
	creditcard: "请输入有效的信用卡号码",
	equalTo: "你的输入不相同",
	extension: "请输入有效的后缀",
	maxlength: $.validator.format( "最多可以输入 {0} 个字符" ),
	minlength: $.validator.format( "最少要输入 {0} 个字符" ),
	rangelength: $.validator.format( "请输入长度在 {0} 到 {1} 之间的字符串" ),
	range: $.validator.format( "请输入范围在 {0} 到 {1} 之间的数值" ),
	step: $.validator.format( "请输入 {0} 的整数倍值" ),
	max: $.validator.format( "请输入不大于 {0} 的数值" ),
	min: $.validator.format( "请输入不小于 {0} 的数值" )
} );
return $;
}));

公共验证资源

在需要使用到的地方进行相关的文件导入处理

<script type="text/javascript" src="js/messages_zh.js"></script>

如果要是贼整个验证函数之中,如果出现了messages的配置,那么就不读取公共资源文件了,如果没有则进行公共子元素文件的读取操作了.
但是现在最需要解决的就是错误信息的提示问题,但到底该在哪里提示呢?为此我们必须进行合理的DOM处理,基于jQuery完成

取消表单的自动的提交处理,

//在页面加载的时候进行事件绑定处理
$(function(){
    $("#myform").validate({
        //开启debug模式
        debug:true,
        //定义规则
        rules: {
            "member.mid": {
                required:true,
                rangelength:[5,15]
            }
        }
    });

});

如果要想正常显示出错误信息,则需要定义一个"errorPlacement"这个属性来处理

//在页面加载的时候进行事件绑定处理
$(function(){
    $("#myform").validate({
        //开启debug模式
        debug:true,
        //errorPlacement表示组件出错时要处理函数.
        //error
        //element表示出错时的组件
        //error表示出错时后产生的错误信息
        errorPlacement:function(error,element){
            //拼凑出要添加的元素id
            var spanName = element.attr("id")+"Msg";
            //替换id中的"."小点,将其转换为转义符号
            if(spanName.indexOf(".") != -1){
                spanName = spanName.replace(".","\\.")
            }
            //在指定的元素中添加错误提示信息
            $("#"+spanName).append(error);
        },
        //定义规则
        rules: {
            "member.mid": {
                required:true,
                rangelength:[5,15]
            }
        }

    });

});

在这里插入图片描述

现在错误信息被添加到了指定的元素中了
如果验证通过了那么西药进行表单提交处理,则应该实现表单的手工提交处理,使用"submitHandler"

     //当表表单验证通过的时候处理函数
        submitHandler:function(form){
            //执行手工提交表单
            form.submit();
        },

对于表单验证而言,应该体现在表单组件上,这个时候应该设置组件高亮显示,使用"highlight"
定义错误时的样式

        //描述表单组件验证错误的时候
        highlight:function(element,errorClass){
            $(element).attr("class","failure");
        },

在这里插入图片描述

设置非高亮显示

        unhighlight:function(element){
            $(element).attr("class","success");
        },

在这里插入图片描述

解决开发框架中中文提示的问题

公共验证资源

猜你喜欢