用js制作form表单验证、二级联动、登陆界面升级版
制作过程中一定要细心,很多代码写的时候需要反复检查,最后才能调试成功,本测试在火狐浏览器下均正常显示。
<!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>
界面实现效果如下: