js dom的结尾：表单验证

 <style>

        * {

            margin: 0;

            padding: 0;

        }

        #form {

            width: 300px;

            margin: 0 auto;

            text-align: center;

        }

        .form-input {

            position: relative;

            padding-bottom: 20px;

        }

        .form-input label {

            position: absolute;

            top: 23px;

            left: 0;

            font-size: 12px;

            color: #505050;

            width: 100%;

            text-align: center;

            display: none;

        }

        .form-input label.default {

            color: #505050;

        }

        .form-input label.danger {

            color: orangered;

        }

        .form-input label.middle {

            color: orange;

        }

    </style>

   <!-- 表单有默认事件 -->

    <form action="javascript:void(0)" id="form">

        <h2>表单验证案例</h2>

        <!-- <button>123</button> -->

        <!-- 验证手机号 -->

        <div class="form-input">

            <input type="text" id="phoneInput" placeholder="请输入手机号">

            <label for="phoneInput" class="danger" data-tip="仅支持中国大陆手机号">仅支持中国大陆手机号</label>

        </div>

        <!-- 验证邮箱 -->

        <div class="form-input">

            <input type="text" id="emailInput" placeholder="请输入邮箱地址">

            <label for="emailInput"data-tip="请输入首字母大写6-20位的邮箱">hello world</label>

        </div>

        <!-- 密码验证 -->

        <div class="form-input">

            <input type="text" id="passwordInput" placeholder="请输入密码">

            <label for="passwordInput"data-tip="请输入密码">hello world</label>

        </div>

        <!-- 重复密码验证 -->

        <div class="form-input">

            <input type="text" id="rpasswordInput" placeholder="请再次输入密码" data-validate="success">

            <label for="rpasswordInput"data-tip="请验证两次密码是否一样">hello world</label>

        </div>

        <button id="submitBtn">提交表单</button>

    </form>

 

 <script>

     第一部分 手机号码验证

        var phone_input = document.querySelector("#phoneInput")

        var phone_lable = phone_input.nextElementSibling

        function validatePhone() {

            var reg = /^1[3-9]\d{9}$/

            if (reg.test(phone_input.value)) {

                success(phone_input, phone_lable)

            } else {

                failed(phone_input, phone_lable, "请输入正确的手机号")

            }

        }

         phone_input.addEventListener("blur", validatePhone)

 // 成功

        function success(input, lable) {

            //dom初始化 1.清类名 2.display:none

            lable.classList.remove("default", "danger", "middle")

            lable.style.display = "none"

            input.style.borderColor = "yellowgreen"

            input.dataset.validate = "success";

失败

  function failed(input, lable, tip_text,class_name) {

            //false || danger ---默认denger

            class_name=class_name||"danger"

            lable.classList.remove("default", "danger", "middle")

            lable.style.display = "block"

            input.style.borderColor = ""

            lable.classList.add(class_name)

            lable.innerHTML = tip_text

            // 标记验证状态;

            input.dataset.validate = "error";

  //邮箱验证

        var email_input = document.querySelector("#emailInput")

        var email_lable = email_input.nextElementSibling

        function validateEmail() {

            // console.log(1);、

            var reg = /^[a-zA-Z]\w{6,20}@[\da-zA-Z]{2,10}\.com$/

            if (!/^[a-zA-Z]/.test(email_input.value)) {

                return failed(email_input, email_lable, "首字母必须大写")

            }

            if (reg.test(email_input.value)) {

                success(email_input, email_lable)

            } else {

                failed(email_input, email_lable, "请输入正确的邮箱")

            }

        }

        email_input.addEventListener("blur", validateEmail)

  //密码强度验证

        var password_input=document.querySelector("#passwordInput")

        var password_lable=password_input.nextElementSibling

        function validatePwd(){

            // console.log(1);

            var strength=0

            if(/\d/.test(password_input.value)){

                strength++;

            }

            if(/[a-zA-Z]/.test(password_input.value)){

                strength++;

            }

            if(/[@#%&]/.test(password_input.value)){

                strength++;

            }

            switch(strength){

                case 1:

                failed(password_input,password_lable,"密码强度过低")

                break;

                case 2:

                failed(password_input,password_lable,"密码强度适中","middle")

                break;

                case 3:

                failed(password_input,password_lable,"密码强度高","default")

                break;

            }

        }

        password_input.addEventListener("input",validatePwd)

 // 密码格式验证

        function validateAllPwd(){

            // 1. 密码长度

            // 2. 密码强度;

            if( !/^.{6,20}$/.test( password_input.value )){

                return failed( password_input , password_lable , "密码长度应该为6~20位");

            }

            if( pwd_input.dataset.strength < 2 ){

                return failed( password_input , password_lable , "密码强度过低,请输入强度更高的密码!");

            }

            success( pwd_input , pwd_label  );

        }

      password_input.addEventListener("blur" ,validateAllPwd )

  //获取焦点

        var inputs=document.querySelectorAll(".form-input input")

        function valieFocus(){

            var lable=this.nextElementSibling

            lable.classList.remove("default", "danger", "middle")

            lable.style.display="block"

            lable.innerHTML=lable.dataset.tip

        }

        for(var i=0;i<inputs.length; i++){

            inputs[i].addEventListener("focus",valieFocus)

        }

    //提交状态验证

    var btn=document.querySelector("#submitBtn")

        function submitB(e) {

            e=e||event

           for (var i  = 0; i  < inputs.length; i ++) {

                if (inputs[i].dataset.validate!=="success") {

                    e.preventDefault()

                    inputs[i].focus()

                    return

                }

           

           }

   }

    btn.addEventListener("click",submitB)