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");
},