原生js表单验证(原创)

所属分类:输入-验证

 4877  72  查看评论 (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验证通过!!!');
};
相关插件-验证

canvas随机生成图片验证码

html5 canvas随机生成图片验证码,代码注释全,使用方便。
  验证
 24992  240

点击按钮获取验证码倒计时

这是一个基于jQuery的点击按钮获取验证码倒计时插件,这个插件在我们的开发中非常常用
  验证
 37547  275

大气简洁的登录注册特效

大气简洁的登录注册特效带注册验证
  验证
 54041  494

jQuery图片滑块验证(附注释)

jQuery拖拽拼图滑块验证
  验证
 7787  88

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

取消回复