基于jquery写的脚本验证器【附实例代码】

发布时间：2018-10-21 18:15:57 所属栏目：交互来源：站长网

导读：主要用到了jquery，以及自定义的一个属性wl_check，属性说明如下： 1、语法 [need:true,type:int,maxlen:15,minlen:2] 2、关键字 need：文本输入框的必填限制 regtype：文本输入框的正则表达式类别验证 minlen：文本输入框的最小输入长度 maxlen：文本输入

主要用到了jquery，以及自定义的一个属性wl_check，属性说明如下：

1、语法
[need:true,type:int,maxlen:15,minlen:2]

2、关键字
need：文本输入框的必填限制
regtype：文本输入框的正则表达式类别验证
minlen：文本输入框的最小输入长度
maxlen：文本输入框的最大输入长度
minval：数字型文本输入框的最值
maxval：数字型文本输入框的最值
notval：下拉框的必选设置
minselect：单复选框的最少选项数
maxselect：单复选框的最多选项数
...

3、使用范围
input:text
input:radio 注意id为'_i'
input:checkbox 注意id为'_i'
textarea
select

4、描述
1、在有wl_check属性的表单控件值发生变化时会自行调用相应的验证方法，该方法无返回值，只是出错提示并定位。
2、在页面post时需要先对某一域内有wl_check属性的表单控件进行验证，通过返回true；否则弹出提示信息并取消提交。

5、使用示例-见demo

<input type="text" id="name" value='dd' title='姓名' wl_check="need:true,minlen:2,maxlen:10" />
表示该文本框必填，并且最多10个字，最少2各个字

DEMO演示：

<html> <head> <title>脚本验证 - <b>jQuery</b> - 烈火网 liehuo.net</title> <script src="/uploads/common/js/jquery-1.4.2.min.js" charset="gb2312" type="text/javascript" language="javascript"></script> <script src="/uploads/common/js/jquery-form-check-parser-1.0.js" charset="gb2312" type="text/javascript" language="javascript"></script> <script type="text/javascript"> $(document).ready(function(){ blurCheck('body'); }); </script> </head> <body id="body"> <div id="checkTxt"> <input type="text" id="name" value='dd' title='姓名' wl_check="need:true,minlen:2,maxlen:10" /> <input type="button" id="Button1" value="验证" onclick="return formCheck('checkTxt');" /> <br /> need:true,minlen:2,maxlen:10 </div> <div id="checkArea"> <textarea id="textarea" title="备注" cols="60" rows="4" wl_check="need:true,regtype:info,minlen:5,maxlen:100"></textarea> <input type="button" id="Button2" value="验证" onclick="return formCheck('checkArea');" /> <br /> need:true,regtype:info,minlen:5,maxlen:100 </div> <div id="checkdrop"> <select id="select" title="类别" wl_check="notselect:0"> <option value="0">请选择</option> <option value="1">上海</option> <option value="2">北京</option> <option value="3">南京</option> </select> <input type="button" id="Button3" value="验证" onclick="return formCheck('checkdrop');" /> <br /> notselect:0 </div> <div id="checkcheckbox"> <span id="ctl00_ContentPlaceHolder1_chkInsurance" style="display: inline-block; width: 100%;" wl_check="minselect:1,maxselect:3"> <input id="ctl00_ContentPlaceHolder1_chkInsurance_0" type="checkbox" name="ctl00$ContentPlaceHolder1$chkInsurance$0" /><label for="ctl00_ContentPlaceHolder1_chkInsurance_0"> 寿险 </label> <input id="ctl00_ContentPlaceHolder1_chkInsurance_1" type="checkbox" name="ctl00$ContentPlaceHolder1$chkInsurance$1" /><label for="ctl00_ContentPlaceHolder1_chkInsurance_1"> 医疗险 </label> <input id="ctl00_ContentPlaceHolder1_chkInsurance_2" type="checkbox" name="ctl00$ContentPlaceHolder1$chkInsurance$2" /><label for="ctl00_ContentPlaceHolder1_chkInsurance_2"> 意外险 </label> <input id="ctl00_ContentPlaceHolder1_chkInsurance_3" type="checkbox" name="ctl00$ContentPlaceHolder1$chkInsurance$3" /><label for="ctl00_ContentPlaceHolder1_chkInsurance_3"> 养老金 </label> </span> <input type="button" id="Button4" value="验证" onclick="return formCheck('checkcheckbox');" /> <br /> minselect:1,maxselect:3 </div> <div id="main"> <span id="ctl00_ContentPlaceHolder1_dropGender" wl_check="minselect:1" title='性别'> <input id="ctl00_ContentPlaceHolder1_dropGender_0" type="radio" name="ctl00$ContentPlaceHolder1$dropGender" value="男" /><label for="ctl00_ContentPlaceHolder1_dropGender_0">男</label><input id="ctl00_ContentPlaceHolder1_dropGender_1" type="radio" name="ctl00$ContentPlaceHolder1$dropGender" value="女" /><label for="ctl00_ContentPlaceHolder1_dropGender_1">女</label></span> <input type="button" id="btn" value="验证" onclick="return formCheck('main');" /> <br /> minselect:1 </div> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

物联网的七大技术走向	智慧城市中5G和物联网
让智能建筑成为可能的	中国移动研究院副院长