原生js登录页面表单验证

最新推荐文章于 2024-05-12 16:02:18 发布

mufengs16

最新推荐文章于 2024-05-12 16:02:18 发布

阅读量836

点赞数 1

分类专栏： html&css 文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_44087363/article/details/108959878

版权

html&css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

原生js登录页面表单验证

<!DOCTYPE html>
<html>
  <head>
    <title>登录页面</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="form.css"/>
    <script type="text/javascript" src="checkform.js"></script>
  </head>
  <body>
    <div class="container">
      <div id="Login">
        <h2>Rigister Wiht Us</h2>
        <form action="#" onsubmit="return checkform()">
          <div class="form-control">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" placeholder="Enter username" onblur="checkname()"/>
            <span class="fault" id="userfault">Error message</span>
          </div>
          <div class="form-control">
            <label for="email">Email</label>
            <input type="text" id="email" name="email" placeholder="Enter email" onblur="checkemail()"/>
            <span class="fault" id="emailfault">Error message</span>
          </div>
          <div class="form-control">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" placeholder="Enter password" onblur="checkpassword()"/>
            <span class="fault" id="passfault">Error message</span>
          </div>
          <div class="form-control">
            <label for="co-password">Confirm Password</label>
            <input type="password" id="co-password" name="co-password" placeholder="Enter password again" onblur="checkconfirmpassword()"/>
            <span class="fault" id="copassfault">Error message</span>
          </div>
          <button type="submit" id="btn">Sumbit</button>
        </form>
      </div>
    </div>
  </body>
</html>

:root {
  --input-width:322px;
  --input-height:36px;
  font-family: 'Open Sans', sans-serif;
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.container {
  width:400px;
  margin:20px auto;
  border-radius:5px;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  padding:30px 40px;
}

#Login h2 {
  margin-bottom:20px;
  text-align:center;
  font-size:22px;
}

.form-control {
  margin-bottom:16px;
}

.form-control label {
  display:block;
  margin-bottom:6px;
  font-size:16px;
}

.form-control input {
  display:block;
  width:var(--input-width);
  height:var(--input-height);
  border:2px #f4f4f4 solid;
  padding:12px;
  font-size:14px;
}

.form-control input:focus {
  outline:0;
  border-color:#888888;
}

.form-control .fault {
  display:block;
  margin-top:4px;
  font-size:12px;
  color:red;
  visibility:hidden;
}

 #btn {
    cursor: pointer;
    display:block;
    width:var(--input-width);
    height:var(--input-height);
    line-height:36px;
    text-align:center;
    border:2px #3498db solid; 
    background-color:#3498db;
    font-size:16px;
    color:white;
    outline:0;
}

.form-control .success {
  border-color:rgb(26, 218, 26);
}

.form-control .error  {
  border-color:rgb(248, 2, 2);
}

function checkform(){
  var verifyname= checkname()
  var verifyemail=checkemail()
  var verifypassword=checkpassword()
  var verifyfirmpassword= checkconfirmpassword()
  return verifyname && verifyemail && verifypassword && verifyfirmpassword
}
  // 验证用户名
  function checkname(){
    var userfal=document.getElementById("userfault");
    var username=document.getElementById("username");
    var pattern=/^\w{3,}$/;
    if(username.value.length==0){
      username.className="error";
      userfal.style.visibility="visible";
      userfal.innerHTML="Username is required";
      return false;
    }
    if(pattern.test(username.value)){
      username.className="success";
      userfal.style.visibility="hidden";
      return true;
    }else{
      username.className="error";
      userfal.style.visibility="visible";
      userfal.innerHTML="Username is failed";
      return false;
    }
  }

  //验证邮件
  function checkemail(){
    var email=document.getElementById("email")
    var emailfal=document.getElementById("emailfault")
    var pattern=/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if(email.value.length==0) {
      email.className="error"
      emailfal.style.visibility="visible"
      emailfal.innerHTML="Email is required"
      return false;
    }
    if(pattern.test(email.value)){
      email.className="success"
      emailfal.style.visibility="hidden"
      return true
    }else{
      email.className="error"
      emailfal.style.visibility="visible"
      emailfal.innerHTML="Email is failed"
      return false
    }
  }

  // 验证密码
  function checkpassword(){
    var password=document.getElementById("password")
    var passfal=document.getElementById("passfault")
    var pattern=/^\w{6,10}$/;
    if(password.value.length==0){
      password.className="error"
      passfal.style.visibility="visible"
      passfal.innerHTML="Password is required"
      return false
    }
    if(pattern.test(password.value)){
      password.className="success"
      passfal.style.visibility="hidden"
      return true
    }else{
      password.className="error"
      passfal.style.visibility="visible"
      passfal.innerHTML="Password is failed"
      return false
    }
  }

  // 确认密码
  function checkconfirmpassword(){
    var copassword=document.getElementById("co-password")
    var copassfal=document.getElementById("copassfault")
    if(copassword.value.length==0){
      copassword.className="error"
      copassfal.style.visibility="visible"
      copassfal.innerHTML="Confirm Password is required"
      return false
    }
    if(copassword.value==password.value){
      copassword.className="success"
      copassfal.style.visibility="hidden"
      return true
    }else{
      copassword.className="error"
      copassfal.style.visibility="visible"
      copassfal.innerHTML="Confirm Password isn't match"
    }
  }

代码比较简单，写法也比较简单
实现表单验证的方法有很多，使用原生的写法相对比较麻烦，改进的地方有很多
使用jQuery或者利用jQuery插件库的写法会比较清晰，简洁，省事，有待探索

mufengs16

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
原生js登录页面表单验证

原生js登录页面表单验证<!DOCTYPE html><html> <head> <title>登录页面</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="form.css"/> <script type="text/javascript" src="checkform.js"&
复制链接

扫一扫