<!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> | |