| <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-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{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> |