<!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 = /^(\[email protected]\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>
时间： 2024-10-05 06:44:22