项目需求

表单内容为空时
image.png
邮箱格式验证
image.png
密码要求
image.png
验证通过的情况
image.png

基础功能实现, 直接上代码

HTML部分:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Form Validator</title>
  7.   <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10.   <div class="container">
  11.     <form action="" id="form" class="form">
  12.       <h2>注册</h2>
  13.       <div class="form-control">
  14.         <label for="username">姓名</label>
  15.         <input type="text" id="username" placeholder="请输入用户名">
  16.         <small>错误提示</small>
  17.       </div>
  18.       <div class="form-control">
  19.         <label for="email">邮箱</label>
  20.         <input type="text" id="email" placeholder="请输入邮箱">
  21.         <small>错误提示</small>
  22.       </div>
  23.       <div class="form-control success">
  24.         <label for="password">密码</label>
  25.         <input type="password" id="password" placeholder="请输入密码">
  26.         <small>错误提示</small>
  27.       </div>
  28.       <div class="form-control">
  29.         <label for="password2">确认密码</label>
  30.         <input type="password" id="password2" placeholder="请输入确认密码">
  31.         <small>错误提示</small>
  32.       </div>
  33.       <button>提交</button>
  34.     </form>
  36.   </div>
  37.   <script src="script.js"></script>
  38. </body>
  39. </html>

CSS部分:

  1. :root {
  2.   --success-color: #2ecc71;
  3.   --error-color: #e74c3c;
  4. }
  6. * {
  7.   margin: 0;
  8.   padding: 0;
  9.   box-sizing: border-box;
  10. }
  12. body {
  13.   background-color: #f9f6fb;
  14.   font-family: Arial, Helvetica, sans-serif;
  15.   display: flex;
  16.   align-items: center;
  17.   justify-content: center;
  18.   min-height: 100vh;
  19. }
  21. .container {
  22.   background-color: #fff;
  23.   border-radius: 5px;
  24.   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  25. }
  27. h2 {
  28.   text-align: center;
  29.   margin: 0 0 20px 0;
  30. }
  32. .form {
  33.   padding: 30px 40px;
  34. }
  36. .form-control {
  37.   margin-bottom: 20px;
  38.   padding-bottom: 10px;
  39.   position: relative;
  40.   width: 400px;
  41. }
  43. .form-control label {
  44.   color: #777;
  45.   display: block;
  46.   margin-bottom: 5px;
  47. }
  49. .form-control input {
  50.   width: 100%;
  51.   border: 2px solid #f0f0f0;
  52.   border-radius: 4px;
  53.   display: block;
  54.   font-size: 14px;
  55.   padding: 10px;
  56. }
  58. .form-control input:focus {
  59.   border-color: #777;
  60.   outline: 0;
  61. }
  63. .form-control.success input {
  64.   border-color: var(--success-color);
  65. }
  66. .form-control.error input {
  67.   border-color: var(--error-color);
  68. }
  69. .form-control small {
  70.   color: var(--error-color);
  71.   position: absolute;
  72.   left: 0;
  73.   bottom: -8px;
  74.   visibility: hidden;
  75. }
  76. .form-control.error small {
  77.   visibility: visible;
  78. }
  81. .form button {
  82.   cursor: pointer;
  83.   background-color: #3498db;
  84.   border: 2px solid #3498db;
  85.   border-radius: 4px;
  86.   width: 100%;
  87.   display: block;
  88.   padding: 10px;
  89.   margin-top: 20px;
  90.   font-size: 16px;
  91.   color: #fff;
  92. }

JS部分:

  1. //获取元素
  2. // const  document = window.document
  3. const form = document.getElementById('form')
  4. const username = document.getElementById('username')
  5. const email = document.getElementById('email')
  6. const password = document.getElementById('password')
  7. const password2 = document.getElementById('password2')
  9. //输入处理函数
  10. function showError(input, message){
  11.   const formControl = input.parentElement
  12.   formControl.className = 'form-control error'
  13.   const small = formControl.querySelector('small')
  14.   small.innerText = message
  15. }
  17. function showSuccess(input){
  18.   const formControl = input.parentElement
  19.   formControl.className = 'form-control success'
  20. }
  22. //邮箱验证正则
  23. function isValidEmail(email){
  24.   const re = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
  25.   return re.test(String(email))
  26. }
  28. //添加事件监听
  29. form.addEventListener('submit', function(e){
  30.   e.preventDefault()
  31.   // console.log(username.value)
  32.   if(username.value === ''){
  33.     showError(username, '用户名为必填项')
  34.     console.log(1)
  35.   }else{
  36.     showSuccess(username)
  37.   }
  39.   if(email.value === ''){
  40.     showError(email, '邮箱为必填项')
  41.   }else if (!isValidEmail(email.value)){
  42.     showError(email, '邮箱格式错误')
  43.   }else{
  44.     showSuccess(email)
  45.   }
  47.   if(password.value === ''){
  48.     showError(password, '密码为必填项')
  49.     console.log(1)
  50.   }else{
  51.     showSuccess(password)
  52.     console.log(2)
  53.   }
  55.   if(password2.value === ''){
  56.     showError(password2, '确认密码为必填项')
  57.     console.log(1)
  58.   }else{
  59.     showSuccess(password2)
  60.     console.log(2)
  61.   }
  62. })

重构

封装输入校验函数, 减少重复代码. 在此基础上, 让错误提示语有更多细节.

  1. //邮箱验证正则
  2. function isValidEmail(email){
  3.   const re = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
  4.   return re.test(String(email))
  5. }
  7. //提取控件关键字
  8. function getKeywords(input){
  9.   return input.placeholder.slice(3)
  10. }
  12. //校验输入内容
  13. function checkRequired(inputArr){
  14.   inputArr.forEach(function (input) {
  15.     // console.log(input.value)
  16.     if (input.value.trim() === '') {  //用trim()方法去除字符串首尾空格
  17.       showError(input, `${getKeywords(input)}为必填项`)
  18.     } else {
  19.       showSuccess(input)
  20.     }
  21.   })
  22. }
  24. //添加事件监听
  25. form.addEventListener('submit', function(e){
  26.   e.preventDefault()
  28.   checkRequired([username, email, password, password2])
  29. })

剩余功能实现

最后完善用户名与密码的长度要求, 封装邮箱校验函数, 完成密码匹配功能.

  1. //获取元素
  2. // const  document = window.document
  3. const form = document.getElementById('form')
  4. const username = document.getElementById('username')
  5. const email = document.getElementById('email')
  6. const password = document.getElementById('password')
  7. const password2 = document.getElementById('password2')
  10. //结果显示函数
  11. function showError(input, message){
  12.   const formControl = input.parentElement
  13.   formControl.className = 'form-control error'
  14.   const small = formControl.querySelector('small')
  15.   small.innerText = message
  16. }
  18. function showSuccess(input){
  19.   const formControl = input.parentElement
  20.   formControl.className = 'form-control success'
  21. }
  23. //邮箱校验
  24. function checkEmail(input){
  25.   const re = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
  26.   // return re.test(String(email))
  27.   // const result = re.test(String(email))
  28.   if (re.test(input.value.trim())) {
  29.     showSuccess(input)
  30.   } else {
  31.     showError(input, '邮箱格式错误')
  32.   }
  33. }
  35. //提取控件关键字
  36. function getKeywords(input){
  37.   return input.placeholder.slice(3)
  38. }
  40. //校验输入内容
  41. function checkRequired(inputArr){
  42.   inputArr.forEach(function (input) {
  43.     // console.log(input.value)
  44.     if (input.value.trim() === '') {  //用trim()方法去除字符串首尾空格
  45.       showError(input, `${getKeywords(input)}为必填项`)
  46.     } else {
  47.       showSuccess(input)
  48.     }
  49.   })
  50. }
  52. //字符长度校验
  53. function checkLength(input, min, max) {
  54.   if (input.value.length < min){
  55.     showError(input, `${getKeywords(input)}至少${min}个字符`)
  56.   } else if (input.value.length > max){
  57.     showError(input, `${getKeywords(input)}至多${max}个字符`)
  58.   } else {
  59.     showSuccess(input)
  60.   }
  61. }
  63. //验证密码匹配
  64. function checkPasswordMatch(input1, input2){
  65.   if (input1.value !== input2.value){
  66.     showError(input2, '密码不匹配')
  67.   }
  68. }
  70. //添加事件监听
  71. form.addEventListener('submit', function(e){
  72.   e.preventDefault()
  73.   checkRequired([username, email, password, password2])
  74.   checkLength(username, 3, 15)
  75.   checkLength(password, 6, 12)
  76.   checkEmail(email)
  77.   checkPasswordMatch(password, password2)
  78. })

效果演示: 链接
项目地址: 链接