用戶註冊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var names = ["tom","jack","lily","韓梅梅"];
//表單驗證
function mySub(){
var userName = document.forms['myForm']['userName'].value;
var pwd = document.forms['myForm']['pwd'].value;
var tel = document.forms['myForm']['tel'].value;
if(userName.length<3 || userName.length>6){
alert("用戶名必須爲3-6位");
return false;
}
//判斷用戶名是否可用，面向對象的編程思想，原則：高內聚、低耦合
var b = isName(userName);
if(b){
document.getElementById("isCan").innerHTML = "用戶名已存在";
return false;
}else{
document.getElementById("isCan").innerHTML = "";
}
//判斷用戶名是否重複，面向過程
// for(var i=0;i<names.length;i++){
// var n = names[i];
// if(n == userName){
// alert("用戶名已存在");
// return false;
// }
// }
if(pwd.length<6){
alert("密碼必須大於6位");
return false;
}
return true;
}
//判斷用戶名，參數爲判斷的用戶名
function isName(str){
for(var i=0;i<names.length;i++){
if(names[i] == str){
return true;
}
}
return false;
}
</script>
</head>
<body >
<h1>用戶註冊</h1>
<span>規則：用戶名長度爲3-6個字符</span>
<hr />
<form name="myForm" action="a.html" method="get" onsubmit="return mySub()">
<p>
用戶名：<input name="userName" type="text" /><span id="isCan" style="color: red;"></span>
</p>
<p>
密碼：<input name="pwd" type="password" />
</p>
<p>
電話：<input name="tel" type="text" />
</p>
<p>
<input type="submit" />
</p>
</form>
</body>
</html>