element-ui表单验证加规则几种方法

要加验证之前一定要确保已经写了 prop属性，该属性是跟rule绑定在一起的。

1.行内式

            <el-form-item :label="$t('phone1')" prop="phone" :rules="[{ required: false, pattern: /^((\+\d{2}-)?0\d{2,3}-\d{7,8})|((\+\d{2}-)?(\d{2,3}-)?([1][3,4,5,6,7,8,9][0-9]\d{8}))$/, message: '请输入正确的电话号码', trigger: 'blur' }]">
              <el-input v-model.trim="form.phone"></el-input>
            </el-form-item>

2.归纳式

      const validatePhone = (rule, value, callback) => {
        if (value) {
          const regexMobile = /^((\+\d{2}-)?0\d{2,3}-\d{7,8})|((\+\d{2}-)?(\d{2,3}-)?([1][3,4,5,6,7,8,9][0-9]\d{8}))$/
          if (regexMobile.test(value)) {
            callback()
          } else {
            callback(new Error(`请输入正确的号码`))
          }
        }
        callback()
      }
        phone: [{ required: false, message: '请输入电话' }, { validator: validatePhone, trigger: 'blur' }]

参考：https://segmentfault.com/a/1190000020410128