表单验证和级联下拉列表（多种实现）

表单验证（以下为JS代码复制放到body中即可）

<form action="https://www.baidu.com" onsubmit="return checkForm()">
        用户名: <input type="text" name="username" onblur="checkUsername()"> <span id="usernameSpan"></span> <br>
        密码: <input type="password" name="pwd1" onblur="checkPwd1()"> <span id="pwd1Span"></span> <br>
        确认密码: <input type="password" name="pwd2" onblur="checkPwd2()"> <span id="pwd2Span"></span> <br>
        <input type="submit">
    </form>

    <script type="text/javascript">

        function checkForm(){
            //进行数据校验，有任何一个不满足要求，就不能提交数据
            var r1 = checkUsername();//检验用户名
            var r2 = checkPwd1();//校验密码
            var r3 = checkPwd2();//校验确认密码
            return r1 && r2 && r3;
        }
        function checkUsername(){
            //校验用户名不为空
            //1 获取用户名的dom对象
            var usernameDom = document.querySelector("input[name='username']");
            //2 访问属性
            //3 输出结果(操作span的内部内容)
            var spanDom = document.querySelector("#usernameSpan");
            if(usernameDom.value.trim().length <= 0){
                spanDom.innerHTML="用户名不能为空";

                return false;//为空 return false
            }else{
                spanDom.innerHTML="";
                return true;//有值 return true
            }
        }


        function checkPwd1(){
            //校验密码不能为空
            //1 获取密码的dom对象
            var pwd1Dom = document.querySelector("input[name='pwd1']");
            //2 访问属性
            //3 输出结果（操作span的内部内容）
            var spanDom = document.querySelector("#pwd1Span");
            if(pwd1Dom.value.trim().length <= 0){
                spanDom.innerHTML = "密码不能为空";
                return false;
            }else{
                spanDom.innerHTML = "";
                return true;
            }
        }

        function checkPwd2(){
            //校验确认密码不为空
            //1 获取确认密码的dom对象
            var pwd2Dom = document.querySelector("input[name='pwd2']");
            //2 访问属性
            //3 输出结果（操作span的内部内容）
            var spanDom = document.querySelector("#pwd2Span");
            if(pwd2Dom.value.trim().length <=  0){
                spanDom.innerHTML = "确认密码不能为空";
                return false;
            }else{
                //确认密码不为空， 此时进行2次密码内容校验
                var pwd1Dom = document.querySelector("input[name='pwd1']");
                if(pwd1Dom.value != pwd2Dom.value){
                    spanDom.innerHTML="两次密码不一致";
                    return false;
                }else{
                    spanDom.innerHTML="";
                    return true;
                }
            }
        }
    </script>

<form action="https://www.baidu.com" >
        用户名: <input type="text" name="username" onblur="checkUsername()"> <span id="usernameSpan"></span> <br>
        密码: <input type="password" name="pwd1" onblur="checkPwd1()"> <span id="pwd1Span"></span> <br>
        确认密码: <input type="password" name="pwd2" onblur="checkPwd2()"> <span id="pwd2Span"></span> <br>
        <input type="button" value="提交" onclick="checkForm()">
    </form>

    <script type="text/javascript">

        function checkForm(){
            //进行数据校验，有任何一个不满足要求，就不能提交数据
            var r1 = checkUsername();//检验用户名
            var r2 = checkPwd1();//校验密码
            var r3 = checkPwd2();//校验确认密码
            if(r1 && r2 && r3){
                document.querySelector("form").submit();
            }
        }
        function checkUsername(){
            //校验用户名不为空
            //1 获取用户名的dom对象
            var usernameDom = document.querySelector("input[name='username']");
            //2 访问属性
            //3 输出结果(操作span的内部内容)
            var spanDom = document.querySelector("#usernameSpan");
            if(usernameDom.value.trim().length <= 0){
                spanDom.innerHTML="用户名不能为空";

                return false;//为空 return false
            }else{
                spanDom.innerHTML="";
                return true;//有值 return true
            }
        }


        function checkPwd1(){
            //校验密码不能为空
            //1 获取密码的dom对象
            var pwd1Dom = document.querySelector("input[name='pwd1']");
            //2 访问属性
            //3 输出结果（操作span的内部内容）
            var spanDom = document.querySelector("#pwd1Span");
            if(pwd1Dom.value.trim().length <= 0){
                spanDom.innerHTML = "密码不能为空";
                return false;
            }else{
                spanDom.innerHTML = "";
                return true;
            }
        }

        function checkPwd2(){
            //校验确认密码不为空
            //1 获取确认密码的dom对象
            var pwd2Dom = document.querySelector("input[name='pwd2']");
            //2 访问属性
            //3 输出结果（操作span的内部内容）
            var spanDom = document.querySelector("#pwd2Span");
            if(pwd2Dom.value.trim().length <=  0){
                spanDom.innerHTML = "确认密码不能为空";
                return false;
            }else{
                //确认密码不为空， 此时进行2次密码内容校验
                var pwd1Dom = document.querySelector("input[name='pwd1']");
                if(pwd1Dom.value != pwd2Dom.value){
                    spanDom.innerHTML="两次密码不一致";
                    return false;
                }else{
                    spanDom.innerHTML="";
                    return true;
                }
            }
        }
    </script>

级联下拉列表

<select name="" id="province" onchange="handleChange()">
        <option value="0">河南</option>
        <option value="1">河北</option>
        <option value="2">山东</option>
        <option value="3">山西</option>
    </select>
    <select name="" id="city">
        <option value="0">郑州</option>
        <option value="1">洛阳</option>
        <option value="2">南阳</option>
        <option value="3">安阳</option>
    </select>

    <script type="text/javascript">
        function handleChange(){
            //根据province的value，动态的修改city下拉列表的内容
            //1 获取province的value
            var provinceDom = document.querySelector("#province");

            //2 根据省份修改城市
            /*provinceDom.value      city 
                0                   <option value="0">郑州</option>
                                    <option value="1">洛阳</option>
                                     <option value="2">南阳</option>
                                     <option value="3">安阳</option> 
                1                   <option value="0">石家庄</option>
                                    <option value="1">保定</option>
                                    <option value="2">承德</option>
                                    <option value="3">邯郸</option>
                ...
                */
            var cityDom = document.querySelector("#city");
            switch(provinceDom.value){
                case '0': cityDom.innerHTML='<option value="0">郑州</option><option value="1">洛阳</option><option value="2">南阳</option><option value="3">安阳</option>';break;
                case '1': cityDom.innerHTML = '<option value="0">石家庄</option><option value="1">保定</option><option value="2">承德</option><option value="3">邯郸</option>';break;
                case '2': cityDom.innerHTML='<option value="0">济南</option><option value="1">青岛</option><option value="2">菏泽</option><option value="3">枣庄</option>';break;
                case '3': cityDom.innerHTML='<option value="0">太原</option><option value="1">晋城</option><option value="2">吕梁</option><option value="3">长治</option>';break;
            }
        }
    </script>

<select name="" id="province" onchange="handleChange()">
        <option value="0">河南</option>
        <option value="1">河北</option>
        <option value="2">山东</option>
        <option value="3">山西</option>
    </select>
    <select name="" id="city">
        <option value="0">郑州</option>
        <option value="1">洛阳</option>
        <option value="2">南阳</option>
        <option value="3">安阳</option>
    </select>

    <script type="text/javascript">
        function handleChange(){
            //根据province的value，动态的修改city下拉列表的内容
            //1 获取province的value
            var provinceDom = document.querySelector("#province");

            //2 根据省份修改城市
            var html = "";
            var a0 = ["郑州","洛阳","南阳","安阳"];
            for(var i = 0; i < a0.length; i++){
                html+='<option value="'+i+'">'+a0[i]+'</option>';
            }
            console.log(html);

            var html1="";
            var a1 = ["石家庄","保定","承德","邯郸"];
            for(var i = 0; i < a1.length; i++){
                html1 +='<option value="'+i+'">'+a1[i]+'</option>';
            }
            console.log(html1);

            var html2 = "";
            var a2 = ["济南","青岛","菏泽","枣庄"];
            for(var i = 0; i < a2.length; i++){
                html2 += '<option value="'+i+'">'+a2[i]+'</option>';
            }
            console.log(html2);

            var html3="";
            var a3 = ["太原","晋城","吕梁","长治"];
            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">河南</option>
        <option value="1">河北</option>
        <option value="2">山东</option>
        <option value="3">山西</option>
    </select>
    <select name="" id="city">
        <option value="0">郑州</option>
        <option value="1">洛阳</option>
        <option value="2">南阳</option>
        <option value="3">安阳</option>
    </select>

    <script type="text/javascript">
        var a0 = ["郑州","洛阳","南阳","安阳"];
        var a1 = ["石家庄","保定","承德","邯郸"];
        var a2 = ["济南","青岛","菏泽","枣庄"];
        var a3 = ["太原","晋城","吕梁","长治"];

        var a =[a0,a1,a2,a3];
        function handleChange(){
            //根据province的value，动态的修改city下拉列表的内容
            //1 获取province的value
            var provinceDom = document.querySelector("#province");

            //2 根据省份修改城市
            
            //a[provinceDom.value] //获取省份对应的城市数组；
            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>