搭建一个简单的前端登陆页面demo

最新推荐文章于 2024-09-06 22:39:39 发布

灰灰的996

最新推荐文章于 2024-09-06 22:39:39 发布

阅读量238

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_73379880/article/details/132713013

版权

技术栈

html 4.0

css

jacaScript

正则表达式（邮箱正则表达式的验证）

设计需求

1、用户名不能含有特殊字符

2、确认密码与密码同步，不同则在span 里边报错

3、邮箱使用正则表达式来判断是否合法

4、注册提交表达

5、重置按钮重置表单

6、如果格式不合法，将不会提交表单

页面详情

如果格式不正确则会在span 里边报错误信息

如果格式正确则会提交表单并将表单数据提交到接口：

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
      span {
       color: red;
       font-size: 12px;
      }
    </style>
</head>
<body>
    <script>
        window.onload=function(){
          var uname=  document.getElementById("username")
          var name_error=document.getElementById("name_error")
          uname.onblur=function(){
     var unamevalue=   uname.value.trim()
           if(!unamevalue){
            name_error.innerHTML="用户名不能为空"
           }else{
              if(unamevalue.length<6||unamevalue>14){
                name_error.innerHTML="长度不能低于6或者大于14"
              } else{
                //用户名合法
                //继续判断正则表达式
                var regExp=/^[A-Za-z0-9]+$/
              var ok=  regExp.test(unamevalue)
              if(ok){
              }else{
                name_error.innerHTML="不能含有特殊字符"
              }
              }

           }
        }
        //获得焦点后将spn清空
        uname.onfocus=function(){
         name_error.innerHTML=''
        }
        var  upw_error=document.getElementById("upw_error")
        var upasw=document.getElementById("upw")
        var upasw2=document.getElementById("upw2")
        upasw2.onblur=function(){
        if(upasw.value.trim()===upasw2.value.trim()){

        } else{
                 upw_error.innerHTML="密码不一致，请重新输入"
        }
    }
    //获得焦点后 将 span与vaule 清空
    upasw2.onfocus=function(){
        upw_error.innerHTML=""
       
    }
    //邮箱的正则表达式验证
    var email=document.getElementById("email")
    var email_error=document.getElementById("email_error")
    email.onblur=function(){
        var emailvalue=email.value.trim()
        var regEmail=/\w[-.\w]*\@[-a-z0-9]+(\.[-a-z0-9]+)*\.(com|cn|edu|uk)/
        var ok=regEmail.test(emailvalue)
        if(ok){
        }else{
           email_error.innerHTML="邮箱地址不合法！"
        }
    }
    email.onfocus=function(){
      email_error.innerHTML=''
    }
      var bt=document.getElementById("bt")
        bt.onclick=function(){
            uname.focus();
            uname.blur();

            upasw2.focus()
            upasw2.blur()
            
            email.focus()
            email.blur()

            if(name_error.innerHTML===''&&upw_error.innerHTML===''&&email_error.innerHTML===''){
                var from=document.getElementById("test")
                
             from.submit()
            }else{

            }
        }
    }
    </script>
    <form action="http://localhost:8090/ja/dfgh" id="test">
      <table align="center">
        <br><br><br><br><br><br><br><br>
        <tr>
          <td>用户名</span></td>
          <td><input type="text" name="username" id="username"/><span id="name_error"></span></td>
        </tr>
        <tr>
          <td>密码</td>
          <td><input type="text" name="upw" id="upw"  required="required"/></td>
        </tr>
        <tr>
          <td> 确认密码</span></td>
          <td><input type="text" id="upw2"/><span id="upw_error"></span></td>
        </tr>  
        <tr>
          <td>邮箱</span></td>
          <td>
            <input type="text" name="email" id="email"/><span id="email_error"></span>
          </td>
        </tr>
        <tr align="center">
          <td colspan="2">
              &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="button" value="登录" id="bt"/>
              &nbsp;&nbsp;
              <input type="reset" value="清空"/>
          </td>
        </tr>
      </table>
        
    </form>
</body>
</html>