javascript 进行邮箱正则验证,将验证按钮与 回车键绑定遇到问题
最近新学习了javascr1ipt ,写了 一个邮箱验证,我想将邮箱验证按钮和回车键绑定在一起;
遇到的问题, 在光标移开邮箱填写栏后任然需要点击验证按钮再回车才能显示验证结果;
&ems; 想要效果 希望在光标移开邮箱填写栏后,直接点击回车键;得到验证的结果;
javascript 部分代码
<script type="text/javascript">
window.onload=function(){
// 当邮箱填写完成后
document.getElementById("email").onblur=function(){
// 当开始按下键盘后
document.getElementById("btn").onkeydown=function(event){
if(event.keyCode==13){
//拿到邮箱;
var emails=document.getElementById("email").value;
// 创建正则;
var emailEegExp=/^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
//经行验证;
if( !emailEegExp.test(emails)){
// 显示验证结果;
document.getElementById("errorMessage").innerText="填写邮箱有误";
}
}
}
}
//重新填写
document.getElementById("email").onfocus=function(){
document.getElementById("errorMessage").innerText="";
}
}
</script>
全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>邮箱正则验证</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
// 当邮箱填写完成后
document.getElementById("email").onblur=function(){
// 当开始按下键盘后
document.getElementById("btn").onkeydown=function(event){
if(event.keyCode==13){
//拿到邮箱;
var emails=document.getElementById("email").value;
// 创建正则;
var emailEegExp=/^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
//经行验证;
if( !emailEegExp.test(emails)){
// 显示验证结果;
document.getElementById("errorMessage").innerText="填写邮箱有误";
}
}
}
}
//重新填写
document.getElementById("email").onfocus=function(){
document.getElementById("errorMessage").innerText="";
}
}
</script>
<input type="text" name="" id="email" value="" />
<span id="errorMessage" style="color: red; font-size: 17px;"> </span>
<br>
<input type="button" name="" id="btn" value="邮箱验证" />
</body>
</html>
有大神能够告诉我为什么我在光标移开邮箱填写栏之后任然需要点击验证按钮再按下回车键才能完成验证呢???
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
只有获得焦点的元素才能监听键盘事件。
即便你的邮箱填写框已经失去焦点,焦点可能回到了
window
上,即只有window
可以监听到键盘事件,所以你可以在修改按钮的onkeydown
之前把焦点给按钮: