4.1 问题描述
在用户注册的时候对用户输入的信息进行校验。校验的内容包括
- 用户名是否符合规范
- 用户名是否已经存在
- 密码是否符合规范
- 确认密码
- 邮箱是否符合规范
- 验证码校验
4.2 解决方案
校验程序主要通过Javascript进行,当输入框丢失焦点的时候进行JavaScript方法的调用,或者在点击提交的时候进行校验。
代码:
html代码
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>尚硅谷会员注册页面</title>
<link type="text/css" rel="stylesheet" th:href="@{/static/css/style.css}" />
<link rel="stylesheet" th:href="@{/static/css/register.css}" />
<style type="text/css">
.login_form {
height: 420px;
margin-top: 25px;
}
</style>
<script type="text/javascript" th:src="@{/static/script/register.js}"></script>
</head>
<body>
<div id="login_header">
<a href="../index.html">
<img class="logo_img" alt="" th:src="@{/static/img/logo.gif}" />
</a>
</div>
<div class="login_banner">
<div class="register_form">
<h1>注册尚硅谷会员</h1>
<form th:action="@{/user.do}" method="post" onsubmit="return preRegister()">
<input type="hidden" name="operate" value="register">
<div class="form-item">
<div>
<label>用户名称:</label>
<input id="unameText" type="text" name="uname" placeholder="请输入用户名" onblur="ckUname()"/>
</div>
<span id="unameSpan" class="errMess">用户名应为6~16位数组和字母组成</span>
</div>
<div class="form-item">
<div>
<label>用户密码:</label>
<input id="pwdText" type="password" name="pwd" placeholder="请输入密码" onblur="ckPwd()"/>
</div>
<span id="pwdSpan" class="errMess">密码的长度至少为8位</span>
</div>
<div class="form-item">
<div>
<label>确认密码:</label>
<input id="pwdText2" type="password" placeholder="请输入确认密码" onblur="ckRePwd()"/>
</div>
<span id="pwdSpan2" class="errMess">密码两次输入不一致</span>
</div>
<div class="form-item">
<div>
<label>用户邮箱:</label>
<input id="emailText" type="text" name="email" placeholder="请输入邮箱" onblur="ckEmail()"/>
</div>
<span id="emailSpan" class="errMess">请输入正确的邮箱格式</span>
</div>
<div class="form-item">
<div>
<label>验证码:</label>
<div class="verify">
<input type="text" name="verifyCode" placeholder="" />
<img src="Kaptcha" alt="" />
</div>
</div>
<span class="errMess">请输入正确的验证码</span>
</div>
<button class="btn">注册</button>
</form>
</div>
</div>
<div id="bottom">
<span>
尚硅谷书城.Copyright ©2015
</span>
</div>
</body>
</html>
JavaScript代码:
let xmlHttpRequest;
function $(id){
return document.getElementById(id);
}
function preRegister(){
let unameText = $("unameText");
let unameReg = /[0-9a-zA-Z]{6,16}/gim;
let unameSpan = $("unameSpan");
if(!unameReg.test(unameText.value)){
unameSpan.style.visibility = "visible";
}else {
unameSpan.style.visibility = "hidden";
}
let pwdText = $("pwdText");
let pwdSpan = $("pwdSpan");
let pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$/;
if (!pwdReg.test(pwdText.value)){
pwdSpan.style.visibility = "visible";
}else {
pwdSpan.style.visibility = "hidden";
}
let pwdText2 = $("pwdText2");
let pwdSpan2 = $("pwdSpan2");
if(pwdText2.value != pwdText.value){
pwdSpan2.style.visibility = "visible";
}else {
pwdSpan2.style.visibility = "hidden";
}
let emailText = $("emailText");
let emailSpan = $("emailSpan");
let emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (!emailReg.test(emailText.value)){
emailSpan.style.visibility = "visible";
}else {
emailSpan.style.visibility = "hidden";
}
if((unameSpan.style.visibility == "hidden") && (pwdSpan.style.visibility == "hidden")
&&(pwdSpan2.style.visibility == "hidden") && (emailSpan.style.visibility == "hidden")){
return true;
}
return false;
}
function ckUname(){
let unameText = $("unameText");
let unameReg = /[0-9a-zA-Z]{6,16}/gim;
let unameSpan = $("unameSpan");
let uname = unameText.value;
if(!unameReg.test(uname)){
unameSpan.style.visibility = "visible";
}else {
unameSpan.style.visibility = "hidden";
}
if(unameSpan.style.visibility == "hidden"){
// 发送Ajax请求,校验用户名是否存在
createXmlHttpRequest();
let url = "user.do?operate=ckUname&uname=" + uname;
xmlHttpRequest.open("GET", url, true);
xmlHttpRequest.onreadystatechange = ckUnameCB;
xmlHttpRequest.send();
}
}
function ckUnameCB(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
alert(xmlHttpRequest.responseText);
}
}
function createXmlHttpRequest(){
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlHttpRequest=new XMLHttpRequest();
} else {
try {
// IE6, IE5 浏览器执行代码
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// 其他IE浏览器
xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
}
}
}
function ckPwd(){
let pwdText = $("pwdText");
let pwdSpan = $("pwdSpan");
let pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$/;
if (!pwdReg.test(pwdText.value)){
pwdSpan.style.visibility = "visible";
}else {
pwdSpan.style.visibility = "hidden";
}
}
function ckRePwd(){
let pwdText = $("pwdText");
let pwdText2 = $("pwdText2");
let pwdSpan2 = $("pwdSpan2");
if(pwdText2.value != pwdText.value){
pwdSpan2.style.visibility = "visible";
}else {
pwdSpan2.style.visibility = "hidden";
}
}
function ckEmail(){
let emailText = $("emailText");
let emailSpan = $("emailSpan");
let emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (!emailReg.test(emailText.value)){
emailSpan.style.visibility = "visible";
}else {
emailSpan.style.visibility = "hidden";
}
}