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

柔情只为你懂 2022-09-26 02:56 120阅读 0赞

**写的用户登录邮箱检测。**

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

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

是在这里写onsubmit事件而不是在那个submit按钮写带调用函数，这个能起到拦截提交的作用，就是如果提交的用户名和密码不行就不提交，返回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>

**效果图**：

![这里写图片描述][20160918203440497]

输入正确格式的邮箱

![这里写图片描述][20160918203520216]

输入错误的邮箱

![这里写图片描述][20160918203614919]

输入正确可以提交，不正确就不能提交~

虽然例子很简单，但也是一种把之前学过的东西进行一番检测。  
主要是用html+css对页面进行绘制，然后用js添加动态效果，用js的正则来检测邮箱，用onsubmit事件来控制提交。又写了函数。

[20160918203440497]: /images/20220717/1edf84b863704194ba2071f561a70373.png
[20160918203520216]: /images/20220717/69a991f0ddfc478f837ec426f8cdefd3.png
[20160918203614919]: /images/20220717/a822403a04904187b4e169a2ccf688cc.png