<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
label {
display: inline-block;
width: 80px;
text-align: right;
}
span {
color: red;
}
</style>
</head>
<body>
<!-- onsubmit的默认事件是触发action -->
<form action="hi.html" onsubmit="">
<p><label for="username">用户名：</label><input type="text" id="username" /><span id="usernameWarn"></span></p>
<p><label for="password">密码：</label><input type="password" id="password" /><span id="passwordWarn"></span></p>
<p><label for="repassword">确认密码：</label><input type="password" id="repassword" /><span id="repasswordWarn"></span></p>
<!-- button的点击事件的默认事件是触发form表单的onsubmit -->
<p><button onclick="registerValidate()">注册</button></p>
</form>
</body>
<script>
var usernameEle = document.getElementById("username");
var usernameWarnEle = document.getElementById("usernameWarn");
var usernameRegExp = /^(\w+@\w+\.\w+)|(1[3458]\d{9})$/;
var passwordEle = document.getElementById("password");
var passwordWarnEle = document.getElementById("passwordWarn");
var passwordRegExp = /^[0-9a-zA-Z]{6,12}$/;
var repasswordEle = document.getElementById("repassword");
var repasswordWarnEle = document.getElementById("repasswordWarn");
function registerValidate() { //清空所有验证 usernameWarnEle.innerHTML = ""; passwordWarnEle.innerHTML = ""; repasswordWarnEle.innerHTML = ""; //验证用户名 if (usernameEle.value == "") { usernameWarnEle.innerHTML = "用户名不能为空！"; } else if (!usernameRegExp.test(usernameEle.value)) { usernameWarnEle.innerHTML = "用户名只能是邮箱或手机号码！"; } //验证密码 if (passwordEle.value == "") { passwordWarnEle.innerHTML = "密码不能为空！"; } else if (!passwordRegExp.test(passwordEle.value)) { passwordWarnEle.innerHTML = "密码只能由6到12位的英文字母或数字组成！"; } //确认密码 if (repasswordEle.value == "") { repasswordWarnEle.innerHTML = "密码不能为空！"; } else if (passwordEle.value != repasswordEle.value) { repasswordWarnEle.innerHTML = "输入的密码不一致！"; } }</script></html>
