插件描述：轻量级，原生js打造表单验证，易上手
更新时间：2019-11-08 00:45:16
使用规则
1. 给需要验证的input 添加类名 【必须】 diy-tips="我是为空验证的提示[可自定义]" 【建议,必须】 [省略有可能会跑偏哟！！！]
如下示例
1 | <input type="text" > //diy-tips="自定义提示" 如果不填写会使用默认星号标志 |
2. 如果input 元素添加了 regular="自定义正则" 则必须添加 reg-tips="自定义的规则提示" 【建议,必须】 [省略有可能会跑偏哟！！！]
1 | <input type="text" id="name" diy-tips="姓名不能为空" regular="^[\u4e00-\u9fa5]+$" reg-tips="我是特殊的定义规则"> |
3. 密码验证 需添加 name="pwd" 属性 【必须】
4. 确认密码验证 需添加 name="confirm-pwd" 【必须】
5. 手机号码验证 需添加 name="phone" 【必须】
至此 即可完成自定义配置
本插件 不依赖与任何第三方框架
1. 下载该文件，直接script标签引入即可
调用方法1
1 2 3 4 5 6 7 8 9 10 | document.querySelector('.js-check1').onclick = function() { var check1 = new Check({ el: '#diy1' ////必须挂载的对象 }).init(); if (!check1) { //是否通过验证 return false; } ////以下是验证通过后的代码 alert('表单1验证通过!!!');}; |
调用方法2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | document.querySelector('.js-check2').onclick = function() { //实例化2 自定义规则参数 var check2 = new Check({ el: '#diy2', //挂载对象 //邮箱 emailRegular: '^[\\w._]+@([qQ][qQ]|[gG][mM][aA][iI][lL]|163)\\.[cC][oO][mM](\\r\\n|\\r|\\n)?$', //邮箱验证正则 emailRulesTips: '请输入正确邮箱', //密码 pwdRegular: '^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$', //密码验证正则 pwdRulesTips: '输入密码与组合规则不一致', //确认密码 confirmPwdTips: '2次密码不一致', //确认密码提示 //手机 phoneRegular: '^1(3|4|5|6|7|8|9)\\d{9}$', //手机号码正则 phoneRulesTips: '请输入正确的手机号' //手机号码验证提示 }).init(); //带参数的初始化 if (!check2) { //是否通过验证 return false; } ////以下是验证通过后的代码 alert('表单2验证通过!!!');}; |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： vue表格数据查询
- 下一个特效： jQuery无缝滚动轮播图（原创）