HTML+CSS+JS小项目之简易表单

yiyiiiii~

已于 2024-08-27 11:49:58 修改

阅读量106

点赞数 3

文章标签： html css javascript

于 2024-08-27 11:40:06 首次发布

本文链接：https://blog.csdn.net/weixin_63555845/article/details/134686598

版权

用途

最近在上信息安全的实验，用到了html+css+js，简单用这些做个表单吧！希望对你有帮助。

demo

主要技术

1.将label如姓名与输入框进行划分。这里用到了把label和输入框划分到了一个div里，并命名为form-group类，在将label命名为form-name,这样就把label和输入框区分了，再给form-name设置一个宽度就可以了。

<div class="form-group">
    <label for="username" class="form-name">用户名</label>
    <div>
      <input type="text" id="username">
      <div class="error"></div>
    </div>
  </div>

2.显示错误。这里用一个showError函数进行了封装，只需要输入id和错误信息，如"username"和"请输入姓名",就可以对这里div里的div进行定位(这里是把显示错误信息的框也设成了一个div，并放在了输入框的div里面)，从而显示错误信息。这里只要输入框信息输入有误，就可以把错误信息显示出来了。

let error=elem.nextElementSibling;
error.innerHTML=message;
error.style.display="block";

3.隐藏错误。用户输入错误信息后，输入了正确的信息如何对信息进行隐藏呢？这里也封装了一个函数，只要检测到输入框输入了正确信息后就调用hideError这个函数，也是检测div,并把这个div的内容设置为空，并隐藏这个div。

let error=elem.nextElementSibling;
error.innerHTML="";
error.style.display="none"

4.如何确认单选框复选框有没有选中。这里封装了一个check函数，我们在找这个单选框、复选框的位置的时候用的是let genders=document.getElementsByName("gender")，根据名字来找，这样就可以找到所有的选项了。然后首先默认所有选项没有被选中，再进行遍历，看有没有选项选中。如果没有选中就显示错误信息，选中了就不显示了。

function check(elems,message){
  let isChecked=false;
  for(let i=0;i<elems.length;i++)
  {
    let elem=elems[i];
    if(elem.checked){
      isChecked=true;
      break;
    }
  }
  if (!isChecked){
    showError(elems[elems.length-1],message);
  }else {
    hideError(elems[elems.length-1]);
  }
}

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证案例</title>
    <style>
      *{
        margin: 0;
        padding: 5px;
        background: rgba(250, 235, 215, 0.99);
      }
      #container{
        border: 1px solid rgba(0, 0, 0, 0.99);
        width: 300px;
        /*上下100 左右自适应*/
        margin: 100px auto;
      }
      .form-group{
        margin-bottom: 20px;
        display: flex;
      }
      #container h3{
        margin: 10px;
        text-align: center;
      }
      .form-name{
        width: 120px;
        /*float:4;*/
      }
      #container button{
        margin-left: 140px;
      }
      .error{
        color: red;
        font-size: 15px;
      }

    </style>
</head>
<body>
<div id="container">
  <h3>用户验证</h3>
  <div class="form-group">
    <label for="username" class="form-name">用户名</label>
    <div>
      <input type="text" id="username">
      <div class="error"></div>
    </div>
  </div>
  <div class="form-group">
    <label for="password" class="form-name">密码</label>
    <div>
      <input type="password" id="password">
      <div class="error"></div>
    </div>
  </div>
  <div class="form-group">
    <label for="re-password" class="form-name">确认密码</label>
    <div>
      <input type="password" id="re-password">
      <div class="error"></div>
    </div>
  </div>
  <div class="form-group" class="form-name">
    <label for="gender" class="form-name">性别</label>
    <div>
      <input type="radio" name="gender">男
      <input type="radio" name="gender">女
      <div class="error"></div>
    </div>

  </div>
  <div class="form-group">
    <div>
      <button id="btn_submit">提交</button>
    </div>

  </div>

</div>
<script>
  let btnSubmit=document.getElementById("btn_submit");
  let username=document.getElementById("username");
  let password=document.getElementById("password");
  let rePassword=document.getElementById("re-password");
  let genders=document.getElementsByName("gender")
  btnSubmit.onclick=function (){
    if(username.value.trim()==""){
      showError(username,"请输入用户名");
    }else {
      hideError(username);
    }
    if((password.value.trim().length<6)&&!(password.value.trim().length==0)){
      showError(password,"密码不能少于6位");
    }else if(password.value.trim().length==0){
      showError(password,"请输入密码");
    }else {
      hideError(password);
    }
    if(rePassword.value.trim()!=password.value.trim()){
      showError(rePassword,"两次密码输入不一致");
    }else {
      hideError(rePassword);
    }
    check(genders,"请选择性别");



  }
  function showError(elem,message){
    let error=elem.nextElementSibling;
    error.innerHTML=message;
    error.style.display="block";
  }
  function check(elems,message){
    let isChecked=false;
    for(let i=0;i<elems.length;i++)
    {
      let elem=elems[i];
      if(elem.checked){
        isChecked=true;
        break;
      }
    }
    if (!isChecked){
      showError(elems[elems.length-1],message);
    }else {
      hideError(elems[elems.length-1]);
    }
  }
//   隐藏提示
  function hideError(elem){
    let error=elem.nextElementSibling;
    error.innerHTML="";
    error.style.display="none"

  }
</script>
</body>
</html>