<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript内置对象</title>
<style>
input{
width:300px;
height:40px;
line-height:40px;
}
</style>
</head>
<body>
<h1>表单验证</h1>
<hr>
<form name="reg_form" method="post" action="1.php" onsubmit="return checkForm()">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="pass"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="repass"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="注 册"></td>
</tr>
</table>
</form>
<script>
function checkForm(){
//验证用户名 6-12位的数字、字母、下划线
var value = document.reg_form.username.value;
if (value.search(/^\w{6,12}$/) == -1) {
alert("用户名必须是6-12位的数字、字母、下划线")
return false;
}
//验证邮箱 test@qq.com
var value = document.reg_form.email.value;
if (value.match(/^[\w-]+@[\w-]+(\.[\w]+){1,3}$/) == null) {
alert("邮箱格式不正确");
return false;
}
//判断密码 长度6-18位
var value = document.reg_form.pass.value;
if (value.length < 6 || value.length > 18) {
alert("密码长度必须6-18位");
return false;
}
var repass = value;
//确认密码
var value = document.reg_form.repass.value;
if (value != repass) {
alert("两次密码不一致");
return false;
}
return true;
}
</script>
</body>
</html>
