html5 form表单

html5 form表单

初步认识

如下写法，包含了大部分常用的表单属性：

<form action="" method="post" enctype="multipart/form-data" autocomplete="off">
  <input type="file">

  <label for="">用户名</label>
  <input type="text" name="user" placeholder="请输入用户名..." required>
  
  <label for="">编号</label>
  <input type="text" name="num" placeholder="请输入编号..." pattern="^\d{5}[a-z]&">

  <input type="text" list="tips">
  <datalist id="tips">
    <option value="Hello">Hello</option>
    <option value="World">World</option>
  </datalist>

  <label for="male">男</label>
  <input type="radio" name="sex" id="male" required>
  <label for="female">女</label>
  <input type="radio" name="sex" id="female" required>

  <input type="submit" name="" formnovalidate>
  <input type="submit">
</form>

约束验证API

1、willValidate 属性
2、validity 属性

<style>
  /* 去除search 类型input 后面的叉 */
  input[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance: none;
    /* 这里写入自定义样式（mobile端不建议使用） */
  }
  /* 去除number 类型input 后面的上下箭头 */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button{
    -webkit-appearance: none;
    margin: 0;
  }
</style>
<form action="" method="post">
  <input type="text" id="username" name="username" placeholder="请输入用户名..." required="required" pattern="^\d{32}$">
  <input type="search" id="search" value="">
  <input type="submit" value="提交">
</form>

<script type="text/javascript">
  var username = document.querySelector("#username");
  console.log(username.validity);
</script>

打印结果：

属性对应关系：

badInput: 错误的input
customError: setCustomValidity()
patternMismatch: pattern
rangeOverflow: max
rangeUnderflow: min
stepMismatch: step
tooLong: maxlength
tooShort: minlenght
typeMismatch: 类型错误时返回true，例如type=email、url
valid: 验证结果
valueMissing: required

举例：input[name=“username”] 有required 属性，但是没有设置value，此时打开页面控制台输出的valueMissing 则为true。

3、validationMessage 属性
4、checkValidity() 方法

说明：只有所有约束条件都满足时，才返回true

<form action="" method="post">
  <input type="email" id="email" value="222">
  <input type="submit" value="提交">
</form>

<script type="text/javascript">
  var email = document.querySelector("#email");
  if(email.checkValidity()){
    // TODO
  }
</script>

5、setCustomValidity() 方法

说明：设置自定义验证信息，用于覆盖预定义的信息。例如required 属性的input 验证失败时，默认提示文案修改等。

<form action="" method="post">
  <input type="text" required pattern="^\d{4}$" oninput="checkit(this)" placeholder="Please input...">
  <input type="password" name="password" pattern="^\d{8}$" oninvalid="this.setCustomValidity('请输入正确的密码')">
  <input type="submit" value="提交">
</form>

<script type="text/javascript">
  function checkit(obj){
    var it = obj.validity;
    // 验证required 属性
    if(true === it.valueMissing){
      obj.setCustomValidity("不能为空！");
    }else{
      // 验证pattern 属性
      if(true === it.patternMismatch){
        obj.setCustomValidity("必须是4 位数字！")
      }else{
        obj.setCustomValidity("");
      }
    }
  }
</script>

说明：setCustomValidity 内容后，再提交表单时，才会弹出对应提示内容。

自带验证美化

表单的一些伪类，方便css 选择器使用：
1、:required 和 :optional
2、:in-range 和 :out-of-range
3、:valid 和 :invalid
4、:read-only 和 :read-write

/* :read-write 不仅可以匹配表单元素，也可以匹配可编辑的div */
<div contentedited=""></div>

使用举例：

<style>
  /* required 属性的input 样式修改 */
  input:required, textarea:required { border-right: 2px solid #aa0088; }
  /* optional input 样式修改 */
  input:optional, textarea:optional { border-right: 2px solid #999; }
  /* 根据是否必填，增加伪元素，进行文字提示 */
  input:optional +label::after { content: "（必填）"; }
  input:optional +label::after { content: "（选填）"; }
  /* 鼠标选入的效果 */
  input:focus, select:focus, textarea:focus { outline: 0; }
  input:required:focus, textarea:required:focus {
    box-shadow: 0 0 3px 1px #aa0088;
  }
  input:optional:focus, textarea:optional:focus {
    box-shadow: 0 0 3px 1px #999;
  }
  /* 提交按钮 */
  input[type="submit"] { 
    background-color: #cc00aa; 
    border: 2px solid #aa0088; 
    padding: 10px 0;
    color: #fff;
  }
  input[type="submit"]:hover { background-color: #aa0088; }
  
  /* 验证样式 */
  input:valid ~label::after{ content: "输入正确！" }
  input:invalid ~label::after{ content: "输入错误！" }
  input:valid{ border: 1px solid green; }
  input:invalid{ border: 1px solid #aa0088; }
  
  /* 带图片效果的验证 */
  input:required,select:required {
    background: url(img/x.jpg) no-repeat 90% center;
  }
  input:required:valid,select:required:valid {
    background: url(img/ok.jpg) no-repeat 90% center;
    box-shadow: 0 0 5px green;
    border-color: green;
  }
  input:required:valid,select:required:valid {
    background: url(img/error.jpg) no-repeat 90% center;
    border-color: red;
    outline: red solid 1px;
  }
</style>

自定义表单的气泡：

<script type="text/javascript">
  /**
   * 自定义表单冒泡
   * @param form
   */
  function replaceInvalidityUi(form){
    // 阻止默认行为
    form.addEventListener("invalid", function(event){
      event.preventDefault();
    }, true);
    form.addEventListener("submit", function(event){
      if(!this.checkValidity()){
        event.preventDefault();
      };
    }, true);
    var submitBtn = document.getElementById("submit");
    submitBtn.addEventListener("click", function(event){
      var inValidityField = form.querySelector(":invalid"),
      errorMessage = form.querySelector(".error-message"),
      parent;

      // 删除之前的错误信息
      for(var i=0; i<errorMessage.length; i++){
        errorMessage[i].parentNode.removeChild(errorMessage[i]);
      }
      // 添加新的错误信息
      for(var i=0; i<inValidityField.lenght; i++){
        parent = inValidityField[i].parentNode;
        parent.insertAdjacentHTML("beforeend", "<div class='error-message'>" + inValidityField[i].validationMessage + "</div>");
      }
      // 自动聚焦收个错误
      if(inValidityField.lenght>0){
        inValidityField[0].focus();
      }
    });
  }

  var form = document.getElementById("form");
  replaceInvalidityUi(form);
</script>

参考文章：
css选择器：https://www.haorooms.com/post/css_selectelement

至此，结束。