基于jQuery的表单验证插件formValidator
jQuery formValidator表单校验插件支持的验证功能（还有很多功能没有罗列）罗列如下：
- 支持所有类型客户端控件的校验
- 支持jQuery所有的选择器语法，只要控件有唯一ID和type属性。
- 支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js，你可以自由的添加、修改里面的内容。
- 支持2种校验模式。第一种：文字提示(showword模式)；第二种：弹出窗口提示(showalert模式)
- 支持多个校验组。如果一个页面有多个提交按钮，分别做不同得提交，提交前要做不同的校验，所以你得用到校验组的功能。
- 支持4种状态的信息提示功能，可以灵活的控制4种状态是否显示。第一种：刚打开网页的时候进行提示；第二种：获得焦点的时候进行提示；第三种：失去焦点时，校验成功时候的提示；第四种：失去焦点时，校验失败的错误提示。
- 支持自动构建提示层。
- 支持自定义错误提示信息。
- 支持控件的字符长度、值范围、选择个数的控制。值范围支持数值型和字符型；选择的个数支持radio/checkbox/select三种控件
- 支持2个控件值的比较。目前可以比较字符串和数值型。
- 支持服务器端校验。
- 支持输入格式的校验。
插件开发者网站http://www.yhuan.com/formvalidator/index.html
作者博客：http://www.cnblogs.com/wzmaodong
使用方法：
1 2 3 4 5 6 7 8 |
//加载jQuery类库 <script src="jquery_last.js" type="text/javascript"></script> //加载插件的样式库，如果你是自动构建提示层，请加载validatorAuto.css <link type="text/css" rel="stylesheet" href="style/validator.css"></link> //加载插件 <script src="formValidator.js" type="text/javascript"></script> //加载扩展库 <script src="formValidatorRegex.js" type="text/javascript"></script> |
示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<form name="newregform" id="newregform" method="post" action="/reg.me?act=doreg"> <input name="uname" id="uname" type="text" /> <span class="onError" id="unameTip"></span> <li> <div class="biaospan3">密码:</div> <div class="biaospan2"><input name="pwd1" id="pwd1" type="password"/></div> <div class="lright"><span class="onError" id="pwd1Tip"></span></div> </li> <li> <div class="biaospan3">确认密码:</div> <div class="biaospan2"><input name="pwd2" id="pwd2" type="password"/></div> <div class="lright"><span class="onError" id="pwd2Tip"></span></div> </li> <li> <div class="biaospan3">电子邮箱:</div> <div class="biaospan2"><input name="email" id="email" type="text" size="30"/></div> <div class="lright"><span class="onError" id="emailTip"></span></div> </li> </form> //下面是js代码 <script type="text/javascript"> $(document).ready(function(){ $.formValidator.initConfig({validatorgroup:"1",formid:"newregform",onerror:function(msg){alert(msg)}}); $("#uname").formValidator({onshow:"请输入昵称",onfocus:"最多20个字符",oncorrect:"输入正确"}).inputValidator({min:1,max:20,empty:{leftempty:false,rightempty:false,emptyerror:"昵称两边不能有空格"},onerror:"昵称不能为空"}).ajaxValidator({ type : "post", cache : false, url : "/servlet/newspace", datatype : "html", addidvalue : true, data : "act=new_vname", success : function(data){ if(data == "success" ){ return true; }else{ return false; } }, buttons: $("#regbtn"), error: function(){alert("服务器忙，请重试");}, onerror : "您注册的昵称已存在", onwait : "正在对昵称进行校验..." }); $("#email").formValidator({onshow:"请输入邮箱",onfocus:"最多80个字符",oncorrect:"输入正确"}).inputValidator({min:1,max:80,empty:{leftempty:false,rightempty:false,emptyerror:"邮箱两边不能有空格"},onerror:"邮箱不能为空"}).regexValidator({regexp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onerror:"邮箱格式不正确"}).ajaxValidator({ type : "post", cache : false, addidvalue : true, url : "/servlet/newspace", datatype : "html", data : "act=new_vemail", success : function(data){ if(data == "success" ){ return true; }else{ return false; } }, buttons: $("#regbtn"), error: function(){alert("服务器忙，请重试");}, onerror : "您注册的邮箱已存在", onwait : "正在对邮箱进行校验..." }); $("#pwd2").formValidator({onshow:"确认密码不能为空",onfocus:"最多20个字符",oncorrect:"输入正确"}).inputValidator({min:1,max:20,empty:{leftempty:false,rightempty:false,emptyerror:"确认密码两边不能有空格"},onerror:"确认密码不能为空"}).compareValidator({desid:"pwd1",operateor:"=",datatype:"string",onerror:"确证密码不一致"}); }); </script> |