html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<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" οnblur="usernameOnblur()" οnkeydοwn="usernameEnterEvent(event)" /><span id="usernameWarn">span>p>
<p><label for="password">密码：label><input type="password" id="password" οnblur="passwordOnblur()" οnkeydοwn="passwordEnterEvent(event)"/><span id="passwordWarn">span>p>
<p><label for="repassword">确认密码：label><input type="password" id="repassword" οnblur="repasswordOnblur()" οnkeydοwn="repasswordEnterEvent(event)"/><span id="repasswordWarn">span>p>
<p><button οnclick="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(); } }
