原生js表单验证(原创)

所属分类:输入-验证

 6161  108  查看评论 (0)
分享到微信朋友圈
X
原生js表单验证(原创) ie兼容8

更新时间:2019-11-08 00:45:16

使用规则

1. 给需要验证的input  添加类名   【必须】   diy-tips="我是为空验证的提示[可自定义]" 【建议,必须】 [省略有可能会跑偏哟!!!]

如下示例

<input type="text" >   //diy-tips="自定义提示" 如果不填写会使用默认星号标志

2. 如果input 元素添加了  regular="自定义正则" 则必须添加 reg-tips="自定义的规则提示" 【建议,必须】  [省略有可能会跑偏哟!!!]

<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

document.querySelector('.js-check1').onclick = function() {
    var check1 = new Check({
        el: '#diy1' ////必须挂载的对象
    }).init();
    if (!check1) { //是否通过验证
        return false;
    }
    ////以下是验证通过后的代码
    alert('表单1验证通过!!!');
};

调用方法2

document.querySelector('.js-check2').onclick = function() {
    //实例化2  自定义规则参数
    var check2 = new Check({
        el: '#diy2', //挂载对象
        //邮箱
        emailRegular: '^[\\w._][email protected]([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验证通过!!!');
};
相关插件-验证

jQuery滑动拼图验证插件SliderImgPuzzle(原创)

仿造网络上的类似的拼图控件,还有结合自己的项目封装的
  验证
 33579  276

jQuery注册表单验证

jQuery常见注册表单 包括表单验证、生日选择、邮箱自动补全、密码可见性与重复密码的验证等
  验证
 51172  470

jQuery验证插件check.js

不提供任何提示,仅提供配置的接口,通过回调的方式来进行
  验证
 19303  203

jquery多功能表单验证2.0(原创)

input输入框验证,多选,单选,下拉验证,可异步修改提示,表单异步提交
  验证
 8082  118

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复