一款Validate通用表单验证Jquery插件
dengjianbin
12年前
此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'); } }
效果如下: