首先非常感谢网友切糕的无私分享,此Jquery插件是他初学JQuery写的一个表单验证工具,基于JQuery,提示的tooltip用的是poshytip消息提示Jquery插件,为jquery扩展一个doValidate方法,对所有带有valType的元素进行表单验证,可用于ajax提交前自动对表单进行验证。为了方便网友们的学习,插件里面的代码每个功能都把注释写得非常详细。
用法非常简单,步骤发下:
1、引入插件文件jq.validate.js和jquery.poshytip.js
2、页面初始化代码
$(function(e) {
var vali=new Validators();
$("#btn").bind("click", vali.subByJs);
});
插件核心代码如下:
//输入框焦点离开后对文本框的内容进行格式验证
function validateBefore() {
//验证通过标识
var flag=true;
//获取验证类型
var valType=$(this).attr('valType');
//获取验证不通过时的提示信息
var msg=$(this).attr('msg');
//自定义的验证字符串
var regString;
if(valType=='OTHER') {//如果类型是自定义,则获取自定义的验证字符串
regString=$(this).attr('regString');
flag=$(this).val()!=''&&$.Validator.match({data:$(this).val(), rule:$(this).attr('valType'), regString:$(this).attr('regString')});
}
else {//如果类型不是自定义,则匹配默认的验证规则进行验证
if($(this).attr('valType')=='required') {//不能为空的判断
if($(this).val()=='') {
flag=false;
}
}
else {//已定义规则的判断
flag=$(this).val()!=''&&$.Validator.match({data:$(this).val(), rule:$(this).attr('valType')});
}
}
//先清除原来的tips
$(this).poshytip('hide');
//如果验证没有通过,显示tips
if(!flag) {
$(this).poshytip('show');
}
}
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
Validate 网友切糕 验证插件 表单验证 消息提示 tip提示层 poshytip