轻量级原生js表单验证代码

查看演示 下载资源 下载积分： 30 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

js代码

<script src="diy-validation.js"></script>
<script>
    window.onload = function () {

        //使用规则
        // 1. 给需要验证的input  添加类名  class="diy" 【必须】   diy-tips="我是为空验证的提示[可自定义]" 【必须】
        // 如下示例
        //  <input type="text" class="diy">   //diy-tips="自定义提示" 如果不填写会使用默认星号标志
        /*
         // 2. 如果input 元素添加了  regular="自定义正则" 则必须添加 reg-tips="自定义的规则提示" 【必须】
        <input type="text" id="name" class="diy" diy-tips="姓名不能为空"
               regular="^[\u4e00-\u9fa5]+$" reg-tips="我是特殊的定义规则">
           */
        // 3.  密码验证 需添加  name="pwd" 属性  【必须】
        // 4.  确认密码验证 需添加 name="confirm-pwd" 【必须】
        // 5.  手机号码验证 需添加  name="phone"  【必须】
        //至此  即可完成自定义配置

        //本插件 不依赖与任何第三方框架

        //1. 下载该文件，直接  script 标签引入即可
        //调用方法2
        document.querySelector('.js-check1').onclick = function () {
            var check1 = new Check({
                el: '#diy1' ////必须挂载的对象
            }).init();
            console.log(check1);
            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验证通过!!!');
        };

    }
</script>