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

雨点打透心脏的1/2处 2023-10-15 17:36 52阅读 0赞

## 技术栈 ##

html 4.0

css

jacaScript

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

## 设计需求 ##

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

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

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

4、注册提交表达

5、重置按钮 重置表单

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

## 页面详情 ##

![4d2172e2c67f4b989495099581d3d6b6.png][]

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

![b0e6e872581b4b76bf38c833a5d96ff5.png][]

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

## 代码部分 ##

<!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">
                           <input type="button" value="登录" id="bt"/>
                    
                  <input type="reset" value="清空"/>
              </td>
            </tr>
          </table>
            
        </form>
    </body>
    </html>

[4d2172e2c67f4b989495099581d3d6b6.png]: https://img-blog.csdnimg.cn/4d2172e2c67f4b989495099581d3d6b6.png
[b0e6e872581b4b76bf38c833a5d96ff5.png]: https://img-blog.csdnimg.cn/b0e6e872581b4b76bf38c833a5d96ff5.png