<body> |
|
<div class="container"> |
|
<div class="form-group"> |
|
<label>邮箱地址</label> |
|
<input type="email" class="form-control" placeholder="请输入邮箱地址" id="email"> |
|
</div> |
|
|
|
<p id="info"></p> |
|
</div> |
|
<script src="/js/ajax.js"></script> |
|
<script> |
|
// 获取页面中的元素 |
|
var emailInp = document.getElementById('email'); |
|
var info = document.getElementById('info'); |
|
|
|
// 当文本框离开焦点以后 |
|
emailInp.onblur = function () { |
|
// 获取用户输入的邮箱地址 |
|
var email = this.value; |
|
// 验证邮箱地址的正则表达式 |
|
var reg = /^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,4}$/; |
|
// 如果用户输入的邮箱地址不符合规则 |
|
if (!reg.test(email)) { |
|
// 给出用户提示 |
|
info.innerHTML = '请输入符合规则的邮箱地址'; |
|
// 让提示信息显示为错误提示信息的样式 |
|
info.className = 'bg-danger'; |
|
// 阻止程序向下执行 |
|
return; |
|
} |
|
|
|
// 向服务器端发送请求 |
|
ajax({ |
|
type: 'get', |
|
url: 'http://localhost:3000/verifyEmailAdress', |
|
data: { |
|
email: email |
|
}, |
|
success: function (result) { |
|
console.log(result); |
|
info.innerHTML = result.message; |
|
info.className = 'bg-success'; |
|
}, |
|
error: function (result) { |
|
console.log(result) |
|
info.innerHTML = result.message; |
|
info.className = 'bg-danger'; |
|
} |
|
}); |
|
|
|
} |
|
</script> |