用js制作form表单验证、二级联动、登陆界面升级版

本文链接：https://blog.csdn.net/miachen520/article/details/51865430
制作过程中一定要细心，很多代码写的时候需要反复检查，最后才能调试成功，本测试在火狐浏览器下均正常显示。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        //测试二级联动功能
        function check(frm) { /*  var uname=frm.userName.value.replace(/(^\s+)|(\s+$)/g,"");//正则表达式，把首尾空格去掉
            var flag=true;
            document.getElementById("unameMsg").innerHTML="";
            document.getElementById("pwdMsg").innerHTML="";
            if(uname.length==0){
                document.getElementById("unameMsg").innerHTML="用户名不能为空";
                flag=false;
            }else{
                if(!(/^\w+$/.test(uname))){
                    document.getElementById("unameMsg").innerHTML="用户名必须是字母、数字、下划线！";
                    flag=false;
                }
            }
            var pwd=frm.pwd.value.replace(/(^\s+)|(\s+$)/g,"");
            if(pwd.length==0){
                document.getElementById("pwdMsg").innerHTML="密码不能为空";
                flag=false;
            }else{
                if(!(/^\w+$/.test(pwd))){
                    document.getElementById("pwdMsg").innerHTML="密码必须是字母、数字、下划线!";
                    flag=false;
                }
            }
            return flag;
            */
            var unameFlag=checkField(frm.userName,$("unameMsg"),/^\w+$/,"用户名不能为空","用户名必须是字母、数字、下划线！");
            var pwdFlag= checkField(frm.pwd,$("pwdMsg"),/^\w{6,16}$/,"密码不能为空","密码必须是字母、数字、下划线组成，并且长度在6~16位！");
            return unameFlag&&pwdFlag;
        }
        function $(a){
            return document.getElementById(a);
        }
        function checkField(fieldObj,msgObj,re,nullMsg,errorMsg){
            msgObj.innerHTML="";
            var v=fieldObj.value.replace(/(^\s+)|(\s+$)/g,"");
            var flag=true;
            if(v.length==0){
                msgObj.innerHTML=nullMsg;
                flag=false;
            }else{
                if(!(re.test(v))){
                    msgObj.innerHTML=errorMsg;
                    flag=false;
                }
            }
            return flag;
        }
        function testSel(obj){
           var movies=["阿凡达","肖申克的救赎","教父","恐怖游轮","美人鱼","功夫","大话西游"];
           var tvs=["余罪","最好的我们","越狱","还珠格格","新三国","西游记","琅琊榜"];
           var hobbys=["跑步","游泳","打乒乓球","羽毛球","篮球","逛街","编程","制作网页"];
           var seeWhat=obj;
           var seeThis=document.form1.seeThis;
           var whatVal=seeWhat.value;
           seeThis.options.length=1;
           if(whatVal==1){
                for(var i=0;i<movies.length;i++){
                    var newOption=document.createElement("option");
                    newOption.value=(i+1);
                    newOption.text=movies[i];
                    seeThis.appendChild(newOption);
                }
           }else if(whatVal==2){
               for(var i=0;i<tvs.length;i++){
                   var newOption=document.createElement("option");
                   newOption.value=(i+1);
                   newOption.text=tvs[i];
                   seeThis.appendChild(newOption);
               }
           }else if(whatVal==3){
               for(var i=0;i<hobbys.length;i++){
                   var newOption=document.createElement("option");
                   newOption.value=(i+1);
                   newOption.text=hobbys[i];
                   seeThis.appendChild(newOption);
               }
           }
        }
    </script>
</head>
<body>
   <center>
       <h1>暴风登陆界面</h1>
       <hr size="6" color="red">
       <br>
    <form method="get" name="form1" action="test.html" οnsubmit="return check(this);">
        用户名:<input type="text" name="userName"/><span style="color:red;" id="unameMsg"></span><br/>
        <div id="nameTips" class="tips" style="ime-mode:disabled;color:#999;font-weight:normal">
            <span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span><br>
        </div>
        密码:<input type="password" name="pwd"/><span style="color:red;" id="pwdMsg"></span><br/>
        <div id="nameTip" class="tips" style="ime-mode:disabled;color:#999;font-weight:normal">
            <span class="txt-tips">6~16个字符，区分大小写</span><br>
        </div>
        看什么:<select name="seeWhat" οnchange="testSel(this)">
                <option value="0">--请选择--</option>
                <option value="1">电影</option>
                <option value="2">电视剧</option>
                <option value="3">爱好</option>
            </select>
            <select name="seeThis">
                <option value="0">--请选择--</option>
            </select><br><br>
        <input type="submit" value="提交"/>
    </form>
   </center>
</body>
</html>
界面实现效果如下：