表单验证[用户名、邮箱、密码、重复密码]

最新推荐文章于 2024-07-12 16:26:30 发布

郝晨妤

最新推荐文章于 2024-07-12 16:26:30 发布

阅读量629

点赞数

分类专栏：前端 Jquery JavaScript 文章标签： java 前端服务器

本文链接：https://blog.csdn.net/H1453571548/article/details/128191058

版权

前端同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

Jquery

10 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>表单验证</title>
       <link rel="stylesheet" href="form.css">
       
       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
       
       <script src="https://unpkg.com/element-ui/lib/index.js"></script>
   </head>
   <body>
   <div class="container">
           <div class="header"><h2>表单验证</h2></div>
       <form class="form" id="form">
           <div class="form_control" id="form_control">
               <label for="">用户名</label>
               <input type="text" placeholder="请输入用户名" id="username"/>
               <i class="el-icon-success"></i>
               <i class="el-icon-warning"></i>
               <small>错误信息</small>
           </div>
           <div class="form_control" id="form_control">
               <label for="">邮箱</label>
               <input type="text" placeholder="请输入邮箱" id="email"/>
               <i class="el-icon-success"></i>
               <i class="el-icon-warning"></i>
               <small>错误信息</small>
           </div>
           <div class="form_control" id="form_control">
               <label for="">密码</label>
               <input type="password" placeholder="请输入密码" id="password"/>
               <i class="el-icon-success"></i>
               <i class="el-icon-warning"></i>
               <small>错误信息</small>
           </div>
           <div class="form_control" id="form_control">
               <label for="">重复密码</label>
               <input type="password" placeholder="请输入重复密码" id="password2"/>
               <i class="el-icon-success"></i>
               <i class="el-icon-warning"></i>
               <small>错误信息</small>
           </div>
           <button type="submit">提交</button>
       </form>
   </div>
   <script>
       const form = document.getElementById("form");
       const username= document.getElementById("username");
       const email = document.getElementById("email");
       const password = document.getElementById("password");
       const password2 = document.getElementById("password2");
       form.addEventListener('submit',(e)=>{
           e.preventDefault();//防止页面提交
           checkInputs();
       })
       function checkInputs(){
           const usernameValue = username.value.trim();//trim()去除输入值的空格
           const emailValue = email.value.trim();
           const passwordValue = password.value.trim();
           const password2Value = password2.value.trim();
           //用户名验证
           if(usernameValue===''){
               setError(username,"用户名不能为空");
           }else{
               setSuccess(username);
           }
           //邮箱验证
           if(emailValue===''){
               setError(email,"邮箱不能为空");
           }else if(!valiEmial(emailValue)){
               setError(email,"邮箱格式不正确，请重新输入");
           }else{
               setSuccess(email);
           }
           //密码验证
           if(passwordValue===''){
               setError(password,"密码不能为空");
           }else{
               setSuccess(password);
           }
           //重复密码验证
           if(password2Value===''){
               setError(password2,"密码不能为空");
           }else if(passwordValue!==password2Value){
               setError(password2,"两次密码输入不一致，请重新输入")
           }else{
               setSuccess(password2);
           }
       }
       function setError(element,msg){
           const element_par = element.parentElement;
           const message = element_par.querySelector('small');
           message.textContent = msg;
           //error是验证错误的样式，success是验证成功的样式
           element_par.classList.remove('success');
           element_par.classList.add('error');
       }
       function setSuccess(element){
           const element_par = element.parentElement;
           element_par.classList.remove('error');
           element_par.classList.add('success');
           //现在这块是错误得样式喝正确的样式混在一起，
           //所以必须在验证将之前的样式去除掉
       }
       function valiEmial(email){
           const regEmial = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
           return regEmial.test(email);
       }
   </script>
   </body>
</html>