js逐步教实现表单系统

时间:2022-07-28
本文章向大家介绍js逐步教实现表单系统，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

html部分:

<div class="container">
    <form action="
    " class="form" id="form">
      <h1>注册</h1>
      <div class="form-control">
        <label for="username">用户名</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <small>错误提示</small>
      </div>
      <div class="form-control">
        <label for="email">邮箱</label>
        <input type="text" id="email" name="email" placeholder="请输入邮箱">
        <small>错误提示</small>
      </div>
      <div class="form-control">
        <label for="password">密码</label>
        <input type="text" id="password" name="password" placeholder="请输入密码">
        <small>错误提示</small>
      </div>
      <div class="form-control">
        <label for="password2">确认密码</label>
        <input type="password" id="password2" name="password2" placeholder="请输入确认密码">
        <small>错误提示</small>
      </div>
      <button>提交</button>
    </form>
  </div>

图片展示:

注意一下:要写对哦.

ｃｓｓ部分：

:root
    {
      --success-color:#2ecc71;
      --error-color:#e74c3c;
    }
    *{padding: 0px;margin: 0px;}
    body
    {
        background-color: #f9fafb;
        font-family: sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }
    .container
    {
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 20px 10px rgba(0,0,0,0.3);
      width: 400px;
    }
    h1
    {
      text-align: center;
      margin: 0 0 20px;
    }
    .form
    {
      padding: 30px 40px;
    }
    .form-control
    {
     margin-bottom: 10px;
     padding-bottom: 20px;
     position: relative;
    }
   .form-control label {
      color: #777;
     display: block;
      margin-bottom: 5px;
    }
    .form-control input {
      width: 100%;
      border: 2px solid #f0f0f0;
      border-radius: 4px;
      display: block;
      font-size: 14px;
      padding: 10px;

    }
    .form-control input:focus {
      border-color: #777;
      outline: 0;
    }
    .form-control.success input {
      border-color: var(--success-color);
    }
    .form-control.error input {
  border-color: var(--error-color);
}
.form-control small {
   color: var(--error-color);
   position: absolute;
   bottom: 0;
   left: 0;
   visibility: hidden;
}
.form-control.error small {
  visibility: visible;
}
.form button {
 cursor: pointer;
  background-color: #3498db;
  border: 2px solid #3498db;
  border-radius: 4px;
  color: #fff;
  display: block;
  font-size: 16px;
  padding: 10px;
  margin-top: 20px;
  width: 100%; 
  }

图片展示：

注意一下： ｃｓｓ变量：格式： 他是一个选择器． 定义变量：

  --success-color:#2ecc71;

使用变量：

 border-color: var(--success-color);

ｊｓ逻辑：

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");
    //第一:先看看是否是按下了button,如果是就先去取消默认的事件,然后再
    form.addEventListener("submit",function(e)
    {
        e.preventDefault();
        //第二:再看看提交之前填写了吗?
        checkRequired([username,email,password,password2]);
        checkLength(username,3,15);
        checkLength(password,6,12);
        checkEmail(email);
        checkPasswordsMatch(password, password2);
    });
    function checkRequired(inputArr)
    {
        inputArr.forEach(function(input)//遍历这些表单看看哪一个没写
        {
            if(input.value.trim()==="")//去除了空格,如果没值的话就
            {
                showError(input,`${getKeyWords(input)}为必填项`);
            }
            else
            {
                showSuccess(input);
            }
        });
    }
    function getKeyWords(input)
    {
      return input.placeholder.slice(3);
    }
    function showError(input,message)
    {
        const formControl=input.parentElement;
        formControl.className="form-control error";
        const small=formControl.querySelector("small");
        small.innerText=message;
    }
    function showSuccess(input)
    {
        const formControl=input.parentElement;
        formControl.className="form-control success";
    }
    function checkLength(input,min,max)
    {
        if(input.value.length<min)
        {
            showError(input,`${getKeyWords(input)}至少${min}个字符`);
        }
        else if(input.value.length>max)
        {
            showError(input,`${getKeyWords(input)}少于${max}个字符`);
        }
        else
        {
          showSuccess(input);
        }
    }
    function  checkEmail(input)
    {
       const re = /^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/;//匹配规则
       if(re.test(input.value.trim()))
       {
          showSuccess(input);
       }
       else
       {
           showError(input,"邮箱格式错误");
       }
    }
    function  checkPasswordsMatch(input1,input2)
    {
        if(input1.value!==input2.value)
        {
             showError(input2, "密码不匹配");
        }
    }

图片展示：

第一步：先获取东西．

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",function(e)
    {
        e.preventDefault();
        checkRequired([username,email,password,password2]);
        checkLength(username,3,15);
        checkLength(password,6,12);
        checkEmail(email);
        checkPasswordsMatch(password, password2);
    });

注意一下；第一：取消系统默认的事件， 最重要的一点在于是否每一个都填了． 所以：

 function checkRequired(inputArr)
    {
        inputArr.forEach(function(input)
        {
            if(input.value.trim()==="")
            {
                showError(input,`${getKeyWords(input)}为必填项`);
            }
            else
            {
                showSuccess(input);
            }
        });
    }

注意一下；这个函数的功能是；看看是否每一个ｉｎｐｕｔ都填啦。

function getKeyWords(input)
    {
      return input.placeholder.slice(3);
    }

这个函数的功能是去掉请输入三个字．

function showError(input,message)
    {
        const formControl=input.parentElement;
        formControl.className="form-control error";
        const small=formControl.querySelector("small");
        small.innerText=message;
    }

这个函数的功能是；错误啦就显示红色边框与字．

例如： 

 function showSuccess(input)
    {
        const formControl=input.parentElement;
        formControl.className="form-control success";
    }

这个函数的功能是对啦就显示对的蓝色边框就行了．

例如： 

function checkLength(input,min,max)
    {
        if(input.value.length<min)
        {
            showError(input,`${getKeyWords(input)}至少${min}个字符`);
        }
        else if(input.value.length>max)
        {
            showError(input,`${getKeyWords(input)}少于${max}个字符`);
        }
        else
        {
          showSuccess(input);
        }
    }

这个函数的功能是；用来看看用户名和密码缺少多少字符．或者说多了．按照下面的标准． 

 function  checkEmail(input)
    {
       const re = /^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/;//匹配规则
       if(re.test(input.value.trim()))
       {
          showSuccess(input);
       }
       else
       {
           showError(input,"邮箱格式错误");
       }
    }

这个函数的功能是看看邮箱的格式对或者不对，

function  checkPasswordsMatch(input1,input2)
    {
        if(input1.value!==input2.value)
        {
             showError(input2, "密码不匹配");
        }
    }

这个函数的功能是；看看两次输入的密码是否都一样。

随机文章
Javascript知识点必读
最近更新