Form validation and cascading drop-down lists (multiple implementations)

Form validation （ The following is a JS Copy code into body Then you can ）

<form action="https://www.baidu.com" onsubmit="return checkForm()">
         user name : <input type="text" name="username" onblur="checkUsername()"> <span id="usernameSpan"></span> <br>
         password : <input type="password" name="pwd1" onblur="checkPwd1()"> <span id="pwd1Span"></span> <br>
         Confirm the password : <input type="password" name="pwd2" onblur="checkPwd2()"> <span id="pwd2Span"></span> <br>
        <input type="submit">
    </form>

    <script type="text/javascript">

        function checkForm(){
            // Perform data check , Any one does not meet the requirements , You cannot submit data 
            var r1 = checkUsername();// Verify user name 
            var r2 = checkPwd1();// Check the password 
            var r3 = checkPwd2();// Verify the confirmation password 
            return r1 && r2 && r3;
        }
        function checkUsername(){
            // Verify that the user name is not empty 
            //1  Get user name dom object 
            var usernameDom = document.querySelector("input[name='username']");
            //2  Access properties 
            //3  Output results ( operation span The internal content of )
            var spanDom = document.querySelector("#usernameSpan");
            if(usernameDom.value.trim().length <= 0){
                spanDom.innerHTML=" The username cannot be empty ";

                return false;// It's empty  return false
            }else{
                spanDom.innerHTML="";
                return true;// Valuable  return true
            }
        }


        function checkPwd1(){
            // The verification password cannot be empty 
            //1  Get the password dom object 
            var pwd1Dom = document.querySelector("input[name='pwd1']");
            //2  Access properties 
            //3  Output results （ operation span The internal content of ）
            var spanDom = document.querySelector("#pwd1Span");
            if(pwd1Dom.value.trim().length <= 0){
                spanDom.innerHTML = " The password cannot be empty ";
                return false;
            }else{
                spanDom.innerHTML = "";
                return true;
            }
        }

        function checkPwd2(){
            // Verify that the password is not empty 
            //1  Get the confirmation password dom object 
            var pwd2Dom = document.querySelector("input[name='pwd2']");
            //2  Access properties 
            //3  Output results （ operation span The internal content of ）
            var spanDom = document.querySelector("#pwd2Span");
            if(pwd2Dom.value.trim().length <=  0){
                spanDom.innerHTML = " The confirmation password cannot be empty ";
                return false;
            }else{
                // Confirm that the password is not empty ,  At this time 2 Second password content verification 
                var pwd1Dom = document.querySelector("input[name='pwd1']");
                if(pwd1Dom.value != pwd2Dom.value){
                    spanDom.innerHTML=" The two passwords don't match ";
                    return false;
                }else{
                    spanDom.innerHTML="";
                    return true;
                }
            }
        }
    </script>

<form action="https://www.baidu.com" >
         user name : <input type="text" name="username" onblur="checkUsername()"> <span id="usernameSpan"></span> <br>
         password : <input type="password" name="pwd1" onblur="checkPwd1()"> <span id="pwd1Span"></span> <br>
         Confirm the password : <input type="password" name="pwd2" onblur="checkPwd2()"> <span id="pwd2Span"></span> <br>
        <input type="button" value=" Submit " onclick="checkForm()">
    </form>

    <script type="text/javascript">

        function checkForm(){
            // Perform data check , Any one does not meet the requirements , You cannot submit data 
            var r1 = checkUsername();// Verify user name 
            var r2 = checkPwd1();// Check the password 
            var r3 = checkPwd2();// Verify the confirmation password 
            if(r1 && r2 && r3){
                document.querySelector("form").submit();
            }
        }
        function checkUsername(){
            // Verify that the user name is not empty 
            //1  Get user name dom object 
            var usernameDom = document.querySelector("input[name='username']");
            //2  Access properties 
            //3  Output results ( operation span The internal content of )
            var spanDom = document.querySelector("#usernameSpan");
            if(usernameDom.value.trim().length <= 0){
                spanDom.innerHTML=" The username cannot be empty ";

                return false;// It's empty  return false
            }else{
                spanDom.innerHTML="";
                return true;// Valuable  return true
            }
        }


        function checkPwd1(){
            // The verification password cannot be empty 
            //1  Get the password dom object 
            var pwd1Dom = document.querySelector("input[name='pwd1']");
            //2  Access properties 
            //3  Output results （ operation span The internal content of ）
            var spanDom = document.querySelector("#pwd1Span");
            if(pwd1Dom.value.trim().length <= 0){
                spanDom.innerHTML = " The password cannot be empty ";
                return false;
            }else{
                spanDom.innerHTML = "";
                return true;
            }
        }

        function checkPwd2(){
            // Verify that the password is not empty 
            //1  Get the confirmation password dom object 
            var pwd2Dom = document.querySelector("input[name='pwd2']");
            //2  Access properties 
            //3  Output results （ operation span The internal content of ）
            var spanDom = document.querySelector("#pwd2Span");
            if(pwd2Dom.value.trim().length <=  0){
                spanDom.innerHTML = " The confirmation password cannot be empty ";
                return false;
            }else{
                // Confirm that the password is not empty ,  At this time 2 Second password content verification 
                var pwd1Dom = document.querySelector("input[name='pwd1']");
                if(pwd1Dom.value != pwd2Dom.value){
                    spanDom.innerHTML=" The two passwords don't match ";
                    return false;
                }else{
                    spanDom.innerHTML="";
                    return true;
                }
            }
        }
    </script>

Cascading drop-down list

<select name="" id="province" onchange="handleChange()">
        <option value="0"> Henan </option>
        <option value="1"> hebei </option>
        <option value="2"> Shandong </option>
        <option value="3"> shanxi </option>
    </select>
    <select name="" id="city">
        <option value="0"> zhengzhou </option>
        <option value="1"> luoyang </option>
        <option value="2"> Nanyang </option>
        <option value="3"> anyang </option>
    </select>

    <script type="text/javascript">
        function handleChange(){
            // according to province Of value, Dynamic changes city Contents of the drop-down list 
            //1  obtain province Of value
            var provinceDom = document.querySelector("#province");

            //2  Modify the city according to the province 
            /*provinceDom.value      city 
                0                   <option value="0"> zhengzhou </option>
                                    <option value="1"> luoyang </option>
                                     <option value="2"> Nanyang </option>
                                     <option value="3"> anyang </option> 
                1                   <option value="0"> shijiazhuang </option>
                                    <option value="1"> baoding </option>
                                    <option value="2"> chengde </option>
                                    <option value="3"> handan </option>
                ...
                */
            var cityDom = document.querySelector("#city");
            switch(provinceDom.value){
                case '0': cityDom.innerHTML='<option value="0"> zhengzhou </option><option value="1"> luoyang </option><option value="2"> Nanyang </option><option value="3"> anyang </option>';break;
                case '1': cityDom.innerHTML = '<option value="0"> shijiazhuang </option><option value="1"> baoding </option><option value="2"> chengde </option><option value="3"> handan </option>';break;
                case '2': cityDom.innerHTML='<option value="0"> jinan </option><option value="1"> Qingdao </option><option value="2"> Heze </option><option value="3"> Zaozhuang </option>';break;
                case '3': cityDom.innerHTML='<option value="0"> taiyuan </option><option value="1"> jincheng </option><option value="2"> Lvliang </option><option value="3"> changzhi </option>';break;
            }
        }
    </script>

<select name="" id="province" onchange="handleChange()">
        <option value="0"> Henan </option>
        <option value="1"> hebei </option>
        <option value="2"> Shandong </option>
        <option value="3"> shanxi </option>
    </select>
    <select name="" id="city">
        <option value="0"> zhengzhou </option>
        <option value="1"> luoyang </option>
        <option value="2"> Nanyang </option>
        <option value="3"> anyang </option>
    </select>

    <script type="text/javascript">
        function handleChange(){
            // according to province Of value, Dynamic changes city Contents of the drop-down list 
            //1  obtain province Of value
            var provinceDom = document.querySelector("#province");

            //2  Modify the city according to the province 
            var html = "";
            var a0 = [" zhengzhou "," luoyang "," Nanyang "," anyang "];
            for(var i = 0; i < a0.length; i++){
                html+='<option value="'+i+'">'+a0[i]+'</option>';
            }
            console.log(html);

            var html1="";
            var a1 = [" shijiazhuang "," baoding "," chengde "," handan "];
            for(var i = 0; i < a1.length; i++){
                html1 +='<option value="'+i+'">'+a1[i]+'</option>';
            }
            console.log(html1);

            var html2 = "";
            var a2 = [" jinan "," Qingdao "," Heze "," Zaozhuang "];
            for(var i = 0; i < a2.length; i++){
                html2 += '<option value="'+i+'">'+a2[i]+'</option>';
            }
            console.log(html2);

            var html3="";
            var a3 = [" taiyuan "," jincheng "," Lvliang "," changzhi "];
            for(var i = 0; i < a3.length; i++){
                html3 += '<option value="'+i+'">'+a3[i]+'</option>';
            }

            console.log(html3);
            var cityDom = document.querySelector("#city");
            switch(provinceDom.value){
                case '0': cityDom.innerHTML=html;break;
                case '1': cityDom.innerHTML = html1;break;
                case '2': cityDom.innerHTML=html2;break;
                case '3': cityDom.innerHTML=html3;break;
            }

            
        }
    </script>

<select name="" id="province" onchange="handleChange()">
        <option value="0"> Henan </option>
        <option value="1"> hebei </option>
        <option value="2"> Shandong </option>
        <option value="3"> shanxi </option>
    </select>
    <select name="" id="city">
        <option value="0"> zhengzhou </option>
        <option value="1"> luoyang </option>
        <option value="2"> Nanyang </option>
        <option value="3"> anyang </option>
    </select>

    <script type="text/javascript">
        var a0 = [" zhengzhou "," luoyang "," Nanyang "," anyang "];
        var a1 = [" shijiazhuang "," baoding "," chengde "," handan "];
        var a2 = [" jinan "," Qingdao "," Heze "," Zaozhuang "];
        var a3 = [" taiyuan "," jincheng "," Lvliang "," changzhi "];

        var a =[a0,a1,a2,a3];
        function handleChange(){
            // according to province Of value, Dynamic changes city Contents of the drop-down list 
            //1  obtain province Of value
            var provinceDom = document.querySelector("#province");

            //2  Modify the city according to the province 
            
            //a[provinceDom.value] // Get the city array corresponding to the province ;
            var html ="";
            for(var i = 0; i < a[provinceDom.value].length; i++){
                html+='<option value="'+i+'">'+a[provinceDom.value][i]+'</option>';
            }
            console.log(html);
           
            var cityDom = document.querySelector("#city");
            cityDom.innerHTML = html;
          

        }
    </script>