废话不多，直接上代码
html页面代码：
<div class="register-container">
<div class="register-banner">
<img src="/img/logo.png"/>
</div>
<label class="error error-label">[[${
lmr?.msg}]]</label>
<form action="/manage/submitRegister" method="post" class="register-form" id="register-form">
<li>
<input type="text" name="account" id="account" th:value="${account}" placeholder="请输入账号" required="true" autocomplete="off" />
<span id="accountTS"></span>
</li>
<li>
<input type="text" name="name" id="name" th:value="${name}" placeholder="请输入姓名" required="true" autocomplete="off" />
<span id="nameTS"></span>
</li>
<li>
<input type="text" name="email" id="email" th:value="${email}" placeholder="请输入邮箱" required="true" autocomplete="off" />
<span id="emailTS"></span>
</li>
<li>
<input type="password" name="pwd" th:value="${pwd}" id="pwd1" placeholder="请输入密码" required="true" autocomplete="off"/>
</li>
<li>
<input type="password" name="pwdtwo" th:value="${pwdtwo}" id="pwd2" placeholder="请输入重复密码" required="true" autocomplete="off"/>
<span id="pwd2TS"></span>
</li>
<li>
<div class="div-select">
<select name="departmentId" autocomplete="off" >
<option class="option-color" th:value="-1" >---请选择部门---</option>
<option class="option-color" th:each="dep:${tDepartmentList}" th:value="${dep.id}" th:text="${dep.name}"></option>
</select>
<span id="departmentTS"></span>
</div>
</li>
<li>
<button type="submit " id="submit">注册账号</button>
<button type="button" onclick="history.go(-1);">取消</button>
</li>
</form>
</div>
<script type="text/javascript" src="js/common/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/register.js"></script>
js文件代码：
// 定义开关变量
var flagAccount = false;
var flagPwd = false;
var flagEmail = false;
var flagDepartment = false;
$(function () {
//获取标签元素
let $account = $('#account');
let $email = $('#email');
let $pwd = $('#pwd1');
let $pwd2 = $('#pwd2');
let $registerForm = $('#register-form');
// 校验用户账号，用户姓名系统允许重名，但是账号不允许重复
$account.focus(function () {
$('#accountTS').html('');
})
$account.blur(function () {
let accountVal = $account.val();
$.ajax({
url:'/validate/register/validateAccount',
type:'GET',
async:true,
data: {
account:accountVal
},
success:function(result) {
if (result.code != 200) {
$('#accountTS').html(result.msg);
flagAccount = false;
} else {
flagAccount = true;
}
},
error:function(result) {
$('#accountTS').html(result.msg);
}
});
});
//校验两次输入的密码是否一致
$pwd2.focus(function () {
$('#pwd2TS').html('');
});
$pwd2.blur(function() {
let pwdVal = $pwd.val();
let pwd2Val = $pwd2.val();
if (pwdVal != pwd2Val){
$('#pwd2TS').html('密码不一致');
flagPwd = false;
} else {
flagPwd = true;
}
});
//邮箱校验
$email.focus(function () {
$('#emailTS').html('');
})
$email.blur(function(){
//校验邮箱格式是否正确
let regExp = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{
2,5}){
1,2}$/i;
let emailVal = $email.val();
if(!regExp.test(emailVal)) {
$('#emailTS').html('邮箱格式错误');
flagEmail = false;
} else {
flagEmail = true;
//校验邮箱是否已注册
$.ajax({
url:'/validate/register/validateEmail',
type:'GET',
data: {
email:emailVal
},
success:function(result){
if (result.code != 200) {
$('#emailTS').html(result.msg);
flagEmail = false;
} else {
flagEmail = true;
}
},
error:function(result){
$('#emailTS').html(result.msg);
}
})
}
})
//校验部门
$('select').change(function () {
$('#departmentTS').html('');
});
$registerForm.submit(function() {
if(flagAccount && flagPwd && flagEmail && $('select').val() != '-1') {
return true;
}
else {
if (!flagAccount) {
$('#accountTS').html('账号校验失败');
}
if (!flagPwd) {
$('#pwd2TS').html('密码校验失败');
}
if (!flagEmail) {
$('#emailTS').html('邮箱校验失败');
}
if ($('select').val() == '-1') {
$('#departmentTS').html('尚未选择部门');
}
return false;
let email=$email.val()
let name = $name.val()
$.ajax({
url:'/manage/registered/detectrepeat/sendemail',
type:'GET',
async:true,
timeout:5000,
data: {
email:email,
name: name
},
success:function(data){
//请求成功之后的返回结果
},
error:function(xhr,textStatus){
//请求失败之后的返回错误信息
console.log('错误',xhr.responseText);
console.log(xhr);
console.log(textStatus);
}
})
}
})
})