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

来源：互联网发布：我的世界一键生成js 编辑：程序博客网时间：2024/05/21 12:45
制作过程中一定要细心，很多代码写的时候需要反复检查，最后才能调试成功，本测试在火狐浏览器下均正常显示。
<!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" onsubmit="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" onchange="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>
界面实现效果如下：
0 0