用户登录邮箱检测表单提交

最新推荐文章于 2022-04-19 20:19:11 发布

Recar

最新推荐文章于 2022-04-19 20:19:11 发布

阅读量872

点赞数

分类专栏： java那条路

本文链接：https://blog.csdn.net/qq_28295425/article/details/52577636

版权

java那条路专栏收录该内容

72 篇文章 0 订阅

订阅专栏

写的用户登录邮箱检测。

只做了前端~
onblur失去焦点事件，66666原来可以用来检测输入的格式是否合格，然后输入完，文本框失去焦点。然后 οnblur=”函数名” 然后失去焦点就执行~~~

 <form action="#" onsubmit="">

这个是onsubmit，点击submit时，触发提交事件，然后调用刚函数

是在这里写onsubmit事件而不是在那个submit按钮写带调用函数，这个能起到拦截提交的作用，就是如果提交的用户名和密码不行就不提交，返回true就提交否则不提交

  <form action="http://www.baidu.com" onsubmit="return(f1())==true">

在提交的时候也进行检测，然后如果用户名的格式还没有满足就不提交，就让他返回false，符合就返回true。让他在onsubmit中做判断。在上面的f1函数做修改

if (!reg.test(username.value)||username.value==""){span.innerHTML ="邮箱格式输入错误！"; return false;}
else{
    span.innerHTML ="";
    return true;
    }

全部代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户登陆检测</title>
<script type="text/javascript">
function f1(){
//设置检查邮箱格式的正则
var reg = /.+@.+\.[a-zA-Z]{2,4}$/;
//获取html中的username，password和span元素对象
var username = document.getElementById("username");
var password = document.getElementById("password");
var span = document.getElementById("span");
//做检查
if (!reg.test(username.value)||username.value==""){span.innerHTML ="邮箱格式输入错误！"; return false;}
else{
    span.innerHTML ="";
    return true;
    }
}
</script>
<style type="text/css">
body {
    background-image: url(ruidian_sidegeermo_fengjing.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #FFF;
    font-family: "微软雅黑";
    font-size: 1.6em;
}
#div1 {
    margin: 120px;
    margin-left: 530px;
    text-align: center;
    width: 200px;
    height: 200px;
}
#div2 {
    background-image: url(1.png);
    background-repeat: no-repeat;
    height: 100px;
    margin-top: 120px;
    margin-left: 580px;
    width: 200px;
}
span {
    font-size: 9px;
}
#b1 {
}
</style>
</head>

<body>
<div id="div2"></div>
<div id="div1">
  <form action="http://www.baidu.com" onsubmit="return(f1())==true">
    <p>
      <label for="username">username</label>
      <input type="text" id="username" onblur="f1()"/>
    </p>
    <p>
      <label for="password">password</label>
      <input type="password" id="password"/>
    </p>
    <input type="submit" value="登陆" id="b1"/>
    <p> <span id="span"></span> </p>
  </form>
</div>
</body>
</html>