利用HTML5 validation API实现轻量简单的表单校验

2018-11-26

好处和要点

利用HTML5 validation API和简单的几行JS代码就可以实现比较轻量可用的校验功能。而不需要编写大量JS代码或者学习和引入一个复杂的校验框架。例如vuelidate就是一个比较复杂的框架。

当然了，如果需要比较复杂的功能，例如异步校验，那么就可能需要引入一个插件。

具体解释

以前的表单校验的功能可能大部分都依赖与JS。例如判断电子邮件是否合规，判断字符串长度是否是在6到30位之间。

自从有了HTML5 validation API之后，我们就可以这部分逻辑交给内置API。例如，判断email的合规性时就不再需要自己写出email的正则了。只需要在input加上type="email"。

<input id="email" v-model="form.email" type="email" class="validate">

然后再调用element.checkValidity()方法来检查合规性。

可用示例（Vue.js+materializecss）

<template>
<div class="contact">
  <h4>预约回电</h4>
  <p>请填写下表，免费向设计专家咨询。设计专家将尽快与您联络。致电时间为星期一至星期五，上午 9:00 至下午 6:00 (GMT+8)</p>

  <form>
    <div class="row">
      <div class="input-field col s12">
        <input id="name" v-model="form.name" type="text" class="validate" required="true">
        <span class="left error">请填写名字</span>
        <label for="name">名字</label>
      </div>
      <div class="input-field col s12">
        <input id="email" v-model="form.email" type="email" class="validate">
        <span class="left error">请填写正确的邮箱</span>
        <label for="email">邮箱(可选)</label>
      </div>
      <div class="input-field col s12">
        <input id="phone" type="tel" v-model="form.phone" class="validate" required="true">
        <span class="left error">请填写正确的手机号码</span>
        <label for="phone">手机</label>
      </div>
      <div class="input-field col s12">
        <textarea id="content" v-model="form.content" class="materialize-textarea validate" placeholder="咨询内容"  required="true"></textarea>
        <span class="left error">请填写咨询内容</span>
      </div>

      <div class="input-field col s12">
        <input type="submit" class="btn-large" @click.prevent="sendContent" value="提交">
      </div>
      </div>
  </form>

</div>
</template>

<script>
export default {
  name: "Contact",
  data: function () {
    return {
      form: {
        name: "",
        email: "",
        phone: "",
        content: ""
      }
    };
  },
  methods: {
    validateId(elemID) {
      let elem = document.getElementById(elemID);
      let elemErr = document.querySelector('#'+elemID+' + span')
      if (!elem.checkValidity()) {
        elemErr.style.display = 'block';
        return false
      } else {
        elemErr.style.display = "none";
        return true
      }
    },
    sendContent() {
      // form validation 
      if (!this.validateId('name') || !this.validateId('email') || !this.validateId('phone') || !this.validateId('content')) {
        console.log('vname')
        return
      }
      console.log(this.form)
    }
  },
  mounted: function () {}
};
</script>

<style lang="scss" scoped>
.contact {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.btn-large {
  width: 150px;
}

span.error {
  display: none;
  color: lightcoral;
}
</style>

效果图

实用校验JS代码片段

下面是判断手机号和电子邮件的代码。

// 判断是否是手机号或电子邮件
const emailOrPhone = (value) => {
  return validateEmail(value) || validatePhone(value)
}

function validateEmail (email) {
  var re = /\S+@\S+\.\S+/
  return re.test(email)
}

function validatePhone (phone) {
  var re = /^\d{11}$/
  return re.test(phone)
}

Resources