标签：
<!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>
<p><label for="username">用户名：</label><input type="text" id="username" onblur="usernameOnblur()" onkeydown="usernameEnterEvent(event)" /><span id="usernameWarn"></span></p>
<p><label for="password">密码：</label><input type="password" id="password" onblur="passwordOnblur()" onkeydown="passwordEnterEvent(event)"/><span id="passwordWarn"></span></p>
<p><label for="repassword">确认密码：</label><input type="password" id="repassword" onblur="repasswordOnblur()" onkeydown="repasswordEnterEvent(event)"/><span id="repasswordWarn"></span></p>
<p><button onclick="register()">注册</button></p>
</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() { var count = 0; //清空所有验证 usernameWarnEle.innerHTML = ""; passwordWarnEle.innerHTML = ""; repasswordWarnEle.innerHTML = ""; //验证用户名 count += usernameValidate(); //验证密码 count += passwordValidate(); //确认密码 count += repasswordValidate(); return count === 0 ? true : false; } //注册 function register() { //验证 var flag = registerValidate(); if (flag) { location.href = "hi.html"; } else { alert("注册失败"); } } //验证用户名 function usernameValidate() { usernameWarnEle.innerHTML = ""; if (usernameEle.value == "") { usernameWarnEle.innerHTML = "用户名不能为空！"; return 1; } else if (!usernameRegExp.test(usernameEle.value)) { usernameWarnEle.innerHTML = "用户名只能是邮箱或手机号码！"; return 1; } return 0; } //验证密码 function passwordValidate() { passwordWarnEle.innerHTML = ""; if (passwordEle.value == "") { passwordWarnEle.innerHTML = "密码不能为空！"; return 1; } else if (!passwordRegExp.test(passwordEle.value)) { passwordWarnEle.innerHTML = "密码只能由6到12位的英文字母或数字组成！"; return 1; } return 0; } //验证确认密码 function repasswordValidate() { repasswordWarnEle.innerHTML = ""; if (repasswordEle.value == "") { repasswordWarnEle.innerHTML = "密码不能为空！"; return 1; } else if (passwordEle.value != repasswordEle.value) { repasswordWarnEle.innerHTML = "输入的密码不一致！"; console.info(passwordEle.value); return 1; } return 0; } //用户名失去焦点 function usernameOnblur() { //验证用户名 usernameValidate(); } //用户名失去焦点 function passwordOnblur() { //验证用户名 passwordValidate(); } //用户名失去焦点 function repasswordOnblur() { //验证用户名 repasswordValidate(); } //用户名回车事件 function usernameEnterEvent(event) { var eventObj = event || window.event; if (eventObj.keyCode === 13) { passwordEle.focus(); } } //密码回车事件 function passwordEnterEvent() { var eventObj = event || window.event; if (eventObj.keyCode === 13) { repasswordEle.focus(); } } //密码回车事件 function passwordEnterEvent() { var eventObj = event || window.event; if (eventObj.keyCode === 13) { repasswordEle.focus(); } }</script></html>标签：
原文地址：http://www.cnblogs.com/Shirley-He/p/5023938.html
