<script !src="">/*** 分析：* 1.给表单绑定onsubmit事件* 监听器中判断每个方法检验的结果，如果都是true，则监听器方法返回true；如果有一个为false,* 则监听器方法返回false* 2.定义一些方法分别校验各个表单项* 3.给各个表单项绑定onblur事件，失去焦点后触发校验监听器*/window.onload = function () {// 1.给表单绑定onsubmit事件document.getElementById("form").onsubmit = function () {// 调用用户名校验方法，调用密码校验方法等方法return checkUsername() && checkPassword() && checkPhoneNumber() && checkEmail() && checkVerCode();};// 给用户名输入框注册离焦事件监听器document.getElementById("userName").onblur = function () {// 调用校验用户名的方法checkUsername();};// 给密码输入框注册离焦事件监听器document.getElementById("password").onblur = function () {// 调用校验密码的方法checkPassword();};// 给手机号输入框注册离焦事件监听器document.getElementById("phoneNumber").onblur = function () {// 调用校验手机号的方法checkPhoneNumber();}// 给邮箱输入框注册离焦事件监听器document.getElementById("email").onblur = function () {// 调用校验邮箱的方法checkEmail();}// 给验证码输入框绑定离焦事件document.getElementById("verCode").onblur = function () {// 调用校验验证码的方法checkVerCode();}};// 校验用户名function checkUsername() {// 1.获取用户名var userName = document.getElementById("userName").value;// 2.定义正则表达式，匹配6-12个英文字母或数字var regUserName = /^\w{6,12}$/;// 3.判断用户名是否符合正则表达式var flag = regUserName.test(userName);// 4.提示信息if (flag) {// 用户名合规，再查询用户名是否被占用了flag = findUser();} else {// 提示：用户名格式错误document.getElementById("prompt-un").innerHTML = "用户名格式错误！";}return flag;}// 查询用户名是否被占用function findUser() {var userName = $("#userName").val();// alert(userName);$.ajax({"url": "finduser.action?accountName=" + userName,"type": "GET","dateType": "json","success": function (data) {// data是一个js对象，服务端返回的是json字符串，到了前端被构造成一个js对象if (data.ok) {// 返回true，表示没有被占用，可以注册document.getElementById("prompt-un").innerHTML = "<img class='tick' src='image/tick.png'/>";return true;} else {// 返回false，表示已经被占用，不可以注册document.getElementById("prompt-un").innerHTML = "用户名已被占用！";return false;}}});}/*** 校验密码*/function checkPassword() {// 1.获取密码var password = document.getElementById("password").value;// 2.定义正则表达式var regPassword = /^\w{6,12}$/;// 3.判断密码是否符合正则表达式var flag = regPassword.test(password);// 4.提示信息if (flag) {// 符合正则表达式则提示对钩document.getElementById("prompt-pw").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 不符合正则表达式则提示：密码格式错误document.getElementById("prompt-pw").innerHTML = "密码格式错误！";}return flag;}// 校验邮箱function checkEmail() {let flag = true;// 获取邮箱地址let email = document.getElementById("email").value;if (!email) {// 如果邮箱为空，直接返回truereturn flag;}let regEmail = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;flag = regEmail.test(email);if (flag) {// 如果符合正则表达式则显示对钩图标document.getElementById("prompt-email").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 如果不符合正则表达式则显示：邮箱格式错误document.getElementById("prompt-email").innerHTML = "邮箱格式错误";}}// 校验手机号码function checkPhoneNumber() {var flag = true;// 获取手机号码var phoneNumber = document.getElementById("phoneNumber").value;if (!phoneNumber) {// 手机号为空，直接返回truereturn flag;}var regPhoneNumber = /(\+86)?1\d{10}/;flag = regPhoneNumber.test(phoneNumber);if (flag) {// 符合正则表达式则显示对钩document.getElementById("prompt-pn").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 不符合正则表达式则显示：手机号格式错误document.getElementById("prompt-pn").innerHTML = "手机号格式错误";}return flag;}// 校验验证码function checkVerCode() {// 获取验证码let verCode = document.getElementById("verCode").value;// 定义正则表达式，匹配任意数字或英文字母组合而成的6个字符let regVerCode = /^[\d\a]{6}$/;// 校验验证码let flag = regVerCode.test(verCode);if (flag) {// 验证码格式正确则调用服务端的校验验证码的接口，这里省略document.getElementById("prompt-vc").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 验证码格式错误，显示：验证码格式错误document.getElementById("prompt-vc").innerHTML = "验证码格式错误";}return flag;}</script>