定制软件JS表单验证(HTML+CSS+JS)详细教程

       大家好，定制软件今天分享一个HTML+CSS+，定制软件这是我前两天学习的一个小demo，定制软件在这记录一下。

目录

         

一、效果图

 

 二、介绍

定制软件图标库使用

  1. <!-- 引入样式 -->
  2. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  3. <!-- 定制软件引入组件库 -->
  4. <script src="https://unpkg.com/element-ui/lib/index.js"></script>

地址： ，定制软件也可使用其他组件库，定制软件根据自己的喜好。

三、代码

（1）HTML

  1. <div class="container">
  2.         <div class="header">
  3.             <h2>表单验证</h2>
  4.         </div>
  5.         <form class="form" id="form">
  6.             <div class="form_control" id="form_control">
  7.                 <label for="">用户名</label>
  8.                 <input type="text" placeholder="定制软件请输入用户名" id="username">
  9.                 <i class="el-icon-success"></i>
  10.                 <i class="el-icon-warning"></i>
  11.                 <small>Error Message</small>
  12.             </div>
  13.             <div class="form_control" id="form_control">
  14.                 <label for="">邮箱</label>
  15.                 <input type="text" placeholder="请输入邮箱" id="email">
  16.                 <i class="el-icon-success"></i>
  17.                 <i class="el-icon-warning"></i>
  18.                 <small>Error Message</small>
  19.             </div>
  20.             <div class="form_control" id="form_control">
  21.                 <label for="">密码</label>
  22.                 <input type="password" placeholder="请输入密码" id="password">
  23.                 <i class="el-icon-success"></i>
  24.                 <i class="el-icon-warning"></i>
  25.                 <small>Error Message</small>
  26.             </div>
  27.             <div class="form_control" id="form_control">
  28.                 <label for="">重复密码</label>
  29.                 <input type="password" placeholder="请再次输入密码" id="password2">
  30.                 <i class="el-icon-success"></i>
  31.                 <i class="el-icon-warning"></i>
  32.                 <small>Error Message</small>
  33.             </div>
  34.             <button type="submit">Submit</button>
  35.         </form>
  36.     </div>

（2）CSS

  1. *{
  2.     box-sizing: border-box;
  3. }
  4. body{
  5.     background-color: #9659b6;
  6.     font-family: "Helvetica Neue", sans-serif;
  7.     display: flex;
  8.     align-items: center;
  9.     justify-content: center;
  10.     min-height: 100vh;
  11.     margin: 0;
  12. }
  13. .container{
  14.     background-color: #fff;
  15.     border-radius: 10px;
  16.     box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  17.     width: 400px;
  18.     max-width: 100%;
  19. }
  20. .header{
  21.     background-color: #f7f7f7;
  22.     border-radius:10px 10px 0 0;
  23.     border-bottom:1px soild #f0f0f0;
  24.     padding: 20px 40px;
  25. }
  26. .header h2{
  27.     margin: 0;
  28. }
  29. .form{
  30.     padding: 30px 40px;
  31. }
  32. .form_control{
  33.     margin-bottom: 10px;
  34.     padding-bottom: 20px;
  35.     position: relative;
  36. }
  37. .form_control label{
  38.     display: inline-block;
  39.     margin-bottom: 5px;
  40. }
  41. .form_control input{
  42.     border: 2px solid #f0f0f0;
  43.     border-radius: 4px;
  44.     display: block;
  45.     font-family: inherit;
  46.     font-size: 14px;
  47.     padding: 10px;
  48.     width: 100%;
  49. }
  50. .form_control input:focus{
  51.     outline: 0;
  52. }
  53. .form_control.success input{
  54.     border-color: #2ecc71;
  55. }
  56. .form_control.error input{
  57.     border-color: #e74c3c;
  58. }
  59. .form_control.success i.el-icon-success{
  60.     visibility: visible;
  61.     color: #2ecc71;
  62. }
  63. .form_control.error i.el-icon-warning{
  64.     visibility: visible;
  65.     color: #e74c3c;
  66. }
  67. .form_control i{
  68.     position: absolute;
  69.     top: 40px;
  70.     right: 10px;
  71.     visibility: hidden;
  72. }
  73. .form_control small{
  74.     visibility: hidden;
  75.     position: absolute;
  76.     font-weight: 600;
  77.     bottom: 0;
  78.     left: 0;
  79. }
  80. .form_control.error small{
  81.     visibility: visible;
  82.     color: #e74c3c;
  83. }
  84. .form button{
  85.     background-color: #8e44ad;
  86.     border: 2px solid #8e44ad;
  87.     /* box-shadow: 0 4px 2px rgba(0,0,0,0.3); */
  88.     border-radius: 5px;
  89.     color: #fff;
  90.     padding: 10px;
  91.     width: 100%;
  92.     font-size: 16px;
  93.     display: block;
  94.     transition: 0.3s;
  95. }
  96. .form button:hover{
  97.     background-color: #fff;
  98.     color: #8e44ad;
  99. }

（3）JavaScript

  1.     <script>
  2.         const form = document.getElementById("form");
  3.         const username = document.getElementById("username");
  4.         const email = document.getElementById("email");
  5.         const passowrd = document.getElementById("password");
  6.         const password2 = document.getElementById("password2");
  7.         form.addEventListener('submit', (e) => {
  8.             e.preventDefault();
  9.             checkInputs();
  10.         })
  11.         function checkInputs() {
  12.             const usernameValue = username.value.trim();
  13.             const emailValue = email.value.trim();
  14.             const passwordValue = passowrd.value.trim();
  15.             const password2Value = password2.value.trim();
  16.             //用户名验证
  17.             if (usernameValue==="") {
  18.                 setErrorFor(username, "用户名不能为空");
  19.             } else {
  20.                 setSuccessFor(username);
  21.             }
  22.             //邮箱验证
  23.             if(emailValue===""){
  24.                 setErrorFor(email,"邮箱不能为空");
  25.             }else if(!valiEmail(emailValue)){
  26.                 setErrorFor(email,"邮箱格式不正确，请重新输入");
  27.             }else{
  28.                 setSuccessFor(email);
  29.             }
  30.             //密码验证
  31.             if(passwordValue===""){
  32.                 setErrorFor(password,"密码不能为空");
  33.             }else{
  34.                 setSuccessFor(passowrd)
  35.             }
  36.             //重复密码验证
  37.             if(password2Value===""){
  38.                 setErrorFor(password2,"密码不能为空");
  39.             }else if(passwordValue!==password2Value){
  40.                 setErrorFor(password2,"两次输入密码不一致，请再次输入")
  41.             }else{
  42.                 setSuccessFor(password2)
  43.             }
  44.         }
  45.         function setErrorFor(input, message) {
  46.             const formControl = input.parentElement;
  47.             const small = formControl.querySelector('small');
  48.             small.textContent = message;
  49.             formControl.classList.remove('success');
  50.             formControl.classList.add('error');
  51.         }
  52.         function setSuccessFor(input) {
  53.             const formControl = input.parentElement;
  54.             formControl.classList.remove('error');
  55.             formControl.classList.add('success');
  56.             
  57.         }
  58.         function valiEmail(email){
  59.             const regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
  60.             return regEmail.test(email);
  61.         }
  62.     </script>

JS代码逻辑：

1.获取页面实体（输入框、表单），使用 getElementById()

  1. const form = document.getElementById("form");
  2. const username = document.getElementById("username");
  3. const email = document.getElementById("email");
  4. const passowrd = document.getElementById("password");
  5. const password2 = document.getElementById("password2");

2.form表单提交事件 

  1. form.addEventListener('submit', (e) => {
  2.             e.preventDefault();//防止浏览器刷新页面提交表单
  3.             checkInputs();
  4.         })

3.总验证方法

  1.         function checkInputs() {
  2.             //获取输入框实体的输入值
  3.             const usernameValue = username.value.trim();
  4.             const emailValue = email.value.trim();
  5.             const passwordValue = passowrd.value.trim();
  6.             const password2Value = password2.value.trim();
  7.             //用户名验证
  8.             if (usernameValue==="") {
  9.                 setErrorFor(username, "用户名不能为空");
  10.             } else {
  11.                 setSuccessFor(username);
  12.             }
  13.             //邮箱验证
  14.             if(emailValue===""){
  15.                 setErrorFor(email,"邮箱不能为空");
  16.             }else if(!valiEmail(emailValue)){
  17.             //valiEmail返回的false表示邮箱不正确，则对其取反为true，if执行
  18.                 setErrorFor(email,"邮箱格式不正确，请重新输入");
  19.             }else{
  20.                 setSuccessFor(email);
  21.             }
  22.             //密码验证
  23.             if(passwordValue===""){
  24.                 setErrorFor(password,"密码不能为空");
  25.             }else{
  26.                 setSuccessFor(passowrd)
  27.             }
  28.             //重复密码验证
  29.             if(password2Value===""){
  30.                 setErrorFor(password2,"密码不能为空");
  31.             }else if(passwordValue!==password2Value){
  32.                 setErrorFor(password2,"两次输入密码不一致，请再次输入")
  33.             }else{
  34.                 setSuccessFor(password2)
  35.             }
  36.         }

4.简单封装验证成功和失败的方法

验证原理：输入框的父组件上添加成功或失败的样式，并且将验证错误信息动态添加到<small>标签中。

setError方法：验证失败方法，input即为组件名（在这里因只有输入框所以写成input），message是错误信息（在总验证方法中传回错误信息message）。此处须注意细节，如果只添加错误样式，输入错误信息后再次输入正确的信息，两个样式相互重叠，造成偏差。所以之前应先去除已出现的样式，没明白的话，可以将添加success的代码注释掉，看看效果。

setSuccess方法：验证成功方法。

valiEmail方法：邮箱验证特殊情况：邮箱格式不正确，将传过来的email值与定义的邮箱范围相比较，返回true或false。

  1.         //验证失败
  2.         function setErrorFor(input, message) {
  3.             const formControl = input.parentElement;//所验证实体（输入框）的父组件
  4.             const small = formControl.querySelector('small');
  5.             small.textContent = message;
  6.             formControl.classList.remove('success');
  7.             formControl.classList.add('error');
  8.         }
  9.         //验证成功
  10.         function setSuccessFor(input) {
  11.             const formControl = input.parentElement;
  12.             //同理
  13.             formControl.classList.remove('error');
  14.             formControl.classList.add('success');
  15.             
  16.         }
  17.  
  18.         //邮箱验证特殊情况：邮箱格式不正确
  19.         function valiEmail(email){
  20.             const regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
  21.             //将传过来的email值与定义的邮箱范围相比较
  22.             return regEmail.test(email);//返回true或false
  23.         }

四、结束

以上为表单验证的全部内容，请大家参考！

如有问题可私信，欢迎探讨！

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发