JS表单的通用验证

使用时请将下面的javascript代码存到一个单一的js文件中。 1、表单要求

将对表单中的所有以下类型的域依次验证，所有验证是去除了前导和后缀空格的，要注意是区分大小写的。 2、空值验证 表单中任意域加上emptyInfo属性将对此域是否为空进行验证（可以和最大长度验证\一般验证方式同时使用）。 无此属性视为此域允许空值。 　　如： 3、最大长度验证（可以和空值验证、一般验证方式同时使用）： 或,3、一般验证方式(不对空值做验证）: 　　如：<input type="text" validator="^(19|20)[0-9]{2}$" errorInfo="不正确的年份!" > 4、标准验证(不与其它验证方式同时使用）： 全部通过<input type="hidden">来实现，并且不需要name属性以免提交到服务器。 　　4.1、合法日期验证： <input type="text" name="yearfieldName" value="2004">注：这里也可以是<select name="yearfieldName"></select>，以下同 <input type="text" name="monthfieldName" value="02"> <input type="text" name="dayfieldName" value="03"> <input type="hidden" validatorType="DateGroup" year="yearfieldName" month="monthfieldName" day="dayfieldName" errorInfo="不正确的日期!"> yearfieldName、monthfieldName、dayfieldName分别为年月日字段，月和日可以是两位(MM)或一位格式(M)， 此处不对每个字段分别检验(如果要检验，请在年月日三个域分别使用前面的一般验证方式），只对日期的最大值是否合法检查; 4.2、日期格式验证(请注意，此验证不对日期是否有效进行验证，还未找到从格式中得到年月日数据的方法^_^)： <input type="text" name="datefieldName" value="2003-01-03 21:31:00"> <input type="hidden" validatorType="Date" fieldName="datefieldName"; format="yyyy-MM-dd HH:mm:ss" errorInfo="不正确的日期!"> 其中格式仅对y、M、d、H、m、s进行支持(其它字符视为非时间的字符) 4.3、列表验证： 检验列表(checkbox、redio、select)是否至少选中了一条记录(对select主要用于多项选择) <input type="checkbox" name="checkbox1"> <input type="hidden" validatorType="Checkbox" fieldName="checkbox1" errorInfo="请至少选中一条记录!"> 其中validatorType可以是Checkbox、R、Select; 对于一个select表单，如果要求选择一条不能是第一条的记录，请用下列方式: <select name="select1" emptyInfo="请选择一个选项!"> <option value="">==请选择==</option> <option value="1">1</option> <select> 4.4、Email验证： <input type="text" name="email"> <input type="hidden" fieldName="email" validatorType="Email" / errorInfo="不正确的Email!"> 其中separator为可选项，表示输入多个email时的分隔符(无此选项只能是一个地址） 4.5、加入其它javascript操作： <script type="text/javascript"> function functionname(){ 自定义方法 } </script> 表单中加入<input type="hidden" validatorType="javascript" functionName="functionname">（此时emptyInfo等属性无效） 时将调用function属性中指定的javascript方法（要求方法返回true或false，返回false将不再验证表单，也不提交表单)。 5、在表单通过验证提交前disable一个按钮（也可将其它域disable,不能与其它验证同在一个域)，不要求按钮是表单中的最后一个 <input type="button" name="提交" validatorType="disable"> 6、不验证表单 　　<input type="hidden" name="validate" value="0" functionName="functionname"> 当validator域值为0时不对表单进行验证，直接提交表单或执行指定function并返回true后提交表单 functionName为可选 </div> <hr class="tx-hr"> <div class="info-next pd15"> <ul class="row row-space20 row-p-space0"> <li class="col-12 col-p-24 txt-ov">上一篇: <a href="/detail/49820.html" title="阿里巴巴代码规范扫描工具P3C">阿里巴巴代码规范扫描工具P3C</a> </li> <li class="col-12 col-p-24 txt-ov">下一篇: <a href="/detail/49822.html" title="苹果8XPC和手机二合一完整版">苹果8XPC和手机二合一完整版</a> </li> </ul> </div> </div> <div id="downn"></div> </div> <div class="side-box col-6 col-p-24" style="position: relative; overflow: visible; box-sizing: border-box; min-height: 1px;"> <div class="theiaStickySidebar" style="padding-top: 0px; padding-bottom: 1px; position: static; transform: none;"> <dl> <dt>相关推荐</dt> <dd> <ul class="ul-26 ul-spot"> <li> <span class="fr f-gray ml10">12-02</span> <a href="/detail/475462.html" title="laraform：具有Laravel支持的Vue.js的响应式表单生成器下载" target="_blank">laraform：具有Laravel支持的Vue.js的响应式表单生成器下载</a> </li> <li> <span class="fr f-gray ml10">12-02</span> <a href="/detail/436806.html" title="passport-xing:Passport和Node.js的Xing身份验证策略下载" target="_blank">passport-xing:Passport和Node.js的Xing身份验证策略下载</a> </li> <li> <span class="fr f-gray ml10">12-02</span> <a href="/detail/431790.html" title="适用于Android、Java、Web三端的通用RSA和AES工具类及Js实现" target="_blank">适用于Android、Java、Web三端的通用RSA和AES工具类及Js实现</a> </li> <li> <span class="fr f-gray ml10">12-02</span> <a href="/detail/429896.html" title="okta-auth-js, 用于 Okta API身份验证的正式js包装器.zip下载" target="_blank">okta-auth-js, 用于 Okta API身份验证的正式js包装器.zip下载</a> </li> <li> <span class="fr f-gray ml10">12-02</span> <a href="/detail/416220.html" title="jQuery实现的具有响应式设计的登录、注册和忘记密码表单验证特效" target="_blank">jQuery实现的具有响应式设计的登录、注册和忘记密码表单验证特效</a> </li> <li> <span class="fr f-gray ml10">12-02</span> <a href="/detail/411212.html" title="本地验证与网络验证通用的验证器（数据转发器）" target="_blank">本地验证与网络验证通用的验证器（数据转发器）</a> </li> <li> <span class="fr f-gray ml10">12-02</span> <a href="/detail/407542.html" title="整合js表单验证功能的表单验证类" target="_blank">整合js表单验证功能的表单验证类</a> </li> <li> <span class="fr f-gray ml10">12-02</span> <a href="/detail/407535.html" title="C#实现身份证号码验证的方法+Validator v1.05表单验证类.txt下载" target="_blank">C#实现身份证号码验证的方法+Validator v1.05表单验证类.txt下载</a> </li> <li> <span class="fr f-gray ml10">12-02</span> <a href="/detail/358943.html" title="这是CNN的一个简单通用实现，运用了numpy和scipy库，该笔记本展示了在MNIST和CIFAR-10数据集上的训练及验证损失曲线" target="_blank">这是CNN的一个简单通用实现，运用了numpy和scipy库，该笔记本展示了在MNIST和CIFAR-10数据集上的训练及验证损失曲线</a> </li> <li> <span class="fr f-gray ml10">12-02</span> <a href="/detail/347503.html" title="ngFormio, 用于 angular.js + Form.io的JSON动力表单渲染库.zip下载" target="_blank">ngFormio, 用于 angular.js + Form.io的JSON动力表单渲染库.zip下载</a> </li> </ul> </dd> </dl> </div> </div> </div> </div> <div class="gotop tx-color hide"> <i class="fa fa-arrow-up"></i> </div> <div class="wap-nav-off"></div> <div class="pop-off2"></div> <div class="gotop tx-color hide" style="display: none;"> <i class="fa fa-arrow-up"></i> </div> <div class="wap-nav-off"></div> <div class="pop-off2"></div> <div class="footer"> <div class="tx-wide"> <dl class="row row-space20 row-p-space10 row-m-space8 mb10"> <dd class="col-3 col-m-8 mb20 waphide"> <h2 class="f-18 mb10">热门标签</h2> <ul class="ul-26"> <li><a href="/zuixin/" target="_blank">最新文章</a></li> <li><a href="/sitemap.xml" target="_blank">网站地图</a></li> <li><a href="/" target="_blank">免责声明</a></li> </ul> </dd> <dd class="col-3 col-m-8 mb20 waphide"> <h2 class="f-18 mb10"></h2> <ul class="ul-26"> <li> <a href="/"></a> </li> <li> <a href="/"></a> </li> </ul> </dd> <dd class="col-9 col-m-24 mb20"> <h2 class="f-18 mb10">资源声明</h2> <p>本站所有软件、应用、教程内容均由小编以及网友收集资料和整理而来，其著作权归原作者所有，仅供学习和研究使用，如有侵犯你版权的，请发邮箱jdjdokok@163.com指出，本站将立即改正。</p> </dd> </dl> </div> <div class="copy ta-c f-12"> <div class="tx-wide"> 酷码网　 <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank"> 粤ICP备2024314634号 </a> </div> </div> </div> <script src="/statics/code211/js/txcstx.min.js" type="text/javascript"></script> <script type="text/javascript" src="/statics/code211/js/theia-sticky-sidebar.min.js"></script> <script id="opendown" type="text/html"> <div class="opendown_header"> <i class="fa fa-cloud-download" aria-hidden="true"></i>下载文件 </div> <div class="opendown_body"> <ul> <li class="opendown_title down-1">JS表单的通用验证</li> <li class="text-danger likes down-1"><strong>资源为：RAR 文件大小为：5KB</strong></li> <li class="text-danger down-1"> 下载协议：本网站资源收集于网络并不能保证每一条都是完美的资源,您下载本资源赞助的费用仅仅是对网站的友情支持与本资源内容无关,一旦赞助不支持退款。 </li> <li class="down-1"> <a href="javascript:void(0)" class="btn btn-big btn-blue btngetdown">我已知晓！立即获取下载地址</a></li> </ul> </div> </script> <script id="paydown" type="text/html"> <div class="opendown_header" id="pay-title">填写信息</div> <div class="opendown_body"> <div id="pay-1"> <ul> <li class="opendown_title">JS表单的通用验证</li> <li> <div> <span class="for-span">邮箱地址：</span> <input type="text" class="for-down" id="pay-email" data-rule="required;email" name="email" value="" placeholder="输入邮箱地址以便发送订单信息"> </div> </li> <li class="text-danger">邮箱建议使用QQ邮箱，填写邮箱方便查询订单信息</li> <li class="down-1"><a href="javascript:void(0)" type="button" class="btn btn-big btn-blue downurl" id="click-pay">高速下载</a></li> </ul> </div> </div> </script> <script> $('.download').click(function(){ layer.open({ type: 1, shade: 0.8, title: false, closeBtn: 1, area: ['480px', ''], content: $('#opendown').html() }); }) $(document).on('click','.btngetdown',function(){ var id=/\/(\d+)\./.exec(window.location.href)[1]; layer.closeAll(); layer.open({ type: 1, shade: 0.8, title: false, closeBtn: 1, area: ['480px', ''], content: $('#paydown').html() }); }) $(document).on('click','#click-pay',function(){ var id=/\/(\d+)\./.exec(window.location.href)[1]; var email=$.trim($('#pay-email').val()); if(email.length==0){ alert('请填写邮箱地址，接收下载文件和查询订单信息'); return; } if(!/\w+@\w+\.\w+/.test(email)){ alert('请填写邮箱正确的邮箱地址，建议使用QQ邮箱'); return; } layer.closeAll(); layer.open({ type: 2, title: '赞助网站', shadeClose: true, shade: 0.8, area: ['580px', '630px'], content: '/default/pay/init?id='+id+'&email='+email }); }) </script> </body> </html>