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

发布时间：2018-09-02 21:57:09 所属栏目：运营来源：站长网

导读：首要用到了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>
提醒：可修改儿女码再运行!

（编辑：河北网）

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

OPPO概念机泄露，5000	华为找到了让手机支持
Redmi K50 Pro屏幕升级	天玑8100电竞旗舰仅要