原生js表单验证(原创)

更新时间：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._]+@([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验证通过!!!');
};

PREVIOUS:
NEXT:
jQuery无缝滚动轮播图（原创）
vue表格数据查询