<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>注册功能（表单校验）</title>
<script type="text/javascript">
function check() {
//alert("check");
var username = document.getElementById("username");
var usernameMsg = document.getElementById("usernameMsg");
var emailMsg = document.getElementById("emailMsg");
var passwordMsg = document.getElementById("passwordMsg");
// console.log(username);
// console.log(username.value);
var isPass = true;
var length = username.value.length;
if (length < 3 || length > 6) {
// alert("用户名长度必须是3-6位");
usernameMsg.innerText="用户名长度必须是3-6位";
isPass = false;
}else{
usernameMsg.innerText="";
}
//正则表达式在线测试 https://c.runoob.com/front-end/854
var email = document.getElementById("email").value;
var p = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (p.test(email) == false) {
// alert("邮箱格式不正确！");
emailMsg.innerText = "邮箱格式不正确！";
isPass = false;
}else{
emailMsg.innerText = "";
}
var password = document.getElementById("password").value;
var rePassword = document.getElementById("rePassword").value;
if (password.length < 6 || password.length > 10) {
// alert("密码必须在6-10位之间");
passwordMsg.innerText = "密码必须在6-10位之间";
isPass = false;
} else {
passwordMsg.innerText = "";
if (password != rePassword) {
// alert("两次输入密码不一致");
passwordMsg.innerText = "两次输入密码不一致";
isPass = false;
}else{
passwordMsg.innerText = "";
}
}
// if (isPass == false) {
// return false;
// } else {
// return true;
// }
return isPass;
}
// onblur失去焦点的时候调用
function checkUsername(username){
// var username = document.getElementById("username");
var usernameMsg = document.getElementById("usernameMsg");
var length = username.value.length;
if (length < 3 || length > 6) {
usernameMsg.innerText="用户名长度必须是3-6位";
}else{
usernameMsg.innerText="";
}
}
function checkEmail(email){
// var email = document.getElementById("email").value;
var emailMsg = document.getElementById("emailMsg");
var p = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (p.test(email.value) == false) {
emailMsg.innerText = "邮箱格式不正确！";
}else{
emailMsg.innerText = "";
}
}
function checkPassword(){
var passwordMsg = document.getElementById("passwordMsg");
// var password = document.getElementById("password").value;
var password = document.getElementById("password");
var rePassword = document.getElementById("rePassword").value;
if (password.value.length < 6 || password.value.length > 10) {
passwordMsg.innerText = "密码必须在6-10位之间";
} else {
passwordMsg.innerText = "";
if (password.value != rePassword) {
passwordMsg.innerText = "两次输入密码不一致";
}else{
passwordMsg.innerText = "";
}
}
}
</script>
</head>
<body>
<form action="register.jsp" onsubmit="return check()">
<table border="1" width="500px" height="500px">
<tr>
<td colspan="2" align="center">注册</td>
</tr>
<tr>
<td align="right">用户名：</td>
<td align="left"><input type="text" id="username" onblur="checkUsername(this)" /><font color="red" id="usernameMsg"></font></td>
</tr>
<tr>
<td align="right">邮箱：</td>
<td><input type="text" id="email" onblur="checkEmail(this)" /><font color="red" id="emailMsg"></font></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password" id="password" onblur="checkPassword()" /><font color="red" id="passwordMsg"></font></td>
</tr>
<tr>
<td align="right">重复密码：</td>
<td><input type="password" id="rePassword" onblur="checkPassword()" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册" /></td>
</tr>
</table>
</form>
</body>
</html>
