VUE element-ui之el-form表单非必填内容格式校验

需求：手机号码非必填，校验其格式
实现方法：

<el-form-item
 label="联系电话"
 class="form-style"
 :prop="phone"
 :rules="[
   {required: false, message: '手机号不能为空', trigger: 'blur'},
   { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
 ]"
>
  <el-input v-model="form.phone" maxlength="11" size="small" class="special-style" />
</el-form-item>

效果图：

可以看到非必填且校验了格式