element-ui自定义非必填字段的格式校验

场景

    element 表单里非必填的字段需要校验格式时使用

注意

    rules 里面非必填字段不要加上 required 属性

<template>
  <div class="container">
    <el-form ref="elForm" :inline="true" :model="form" :rules="rules" size="small">
      <el-form-item label="姓名" prop="name">
        <el-input v-model.trim="form.name" maxlength="20" placeholder="请输入姓名"/>
      </el-form-item>
   	  <el-form-item label="手机号码" prop="phone">
        <el-input v-model.trim="form.phone" maxlength="20" placeholder="请输入手机号码"/>
      </el-form-item>
    </el-form>
  </div>
</template>
export default {
  components: {},
  data() {
	var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/
      // 当数据为空时，不进行校验
      if (!value) {
        return callback()
      }
      setTimeout(() => {
        if (phoneReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的手机号码'))
        }
      }, 100)
    }
    return {
      form: {
        name: null,
        phone: null
	  },
	  rules: {
	    name: { required: true, message: '请输入姓名'},
	    phone: { validator: checkPhone}
	  }
    }
  }
}