js表单系统

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    :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%; 
  }
  </style>
</head>
<body>
  <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>
  <script type="text/javascript">
    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)//功能:遍历看是否input为空
    {
    
    
        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)//到了这里的话,代表输入错误了,显示错的颜色,并且把.massage里面是错误的警告语句
    {
    
    
        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}个字符`);//因为input中自带了placeholder，所以去掉请输入这几个字
        }
        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()))//输入的邮箱号清除空格如果符合re中的规则的话
       {
    
    
          showSuccess(input);
       }
       else
       {
    
    
           showError(input,"邮箱格式错误");//不匹配代表输入的邮箱错误
       }
    }
    function  checkPasswordsMatch(input1,input2)//两次输入的密码是否匹配
    {
    
    
        if(input1.value!==input2.value)
        {
    
    
             showError(input2, "密码不匹配");
        }
    }
  </script>
</body>
</html>
在这里插入图片描述
猜你喜欢
