一款Validate通用表单验证Jquery插件

dengjianbin 11年前

此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通用表单验证Jquery插件
在线演示和下载