<el-form ref="form" :model="form" :rules="rules" label-width="80px">
  <el-form-item label="名稱" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="性別" prop="sex">
    <el-input v-model="form.sex"></el-input>
  </el-form-item>
  <el-form-item label="年齡" prop="age">
    <el-input v-model="form.age"></el-input>
  </el-form-item>
</el-form>

  <el-form-item label="名稱" prop="name">
    <el-input v-model="form.userName"></el-input>
  </el-form-item>

form: {
  name: undefined,
  sex: undefined,
  age: undefined
},
rules: {
    name: [
          { required: true, message: "用戶名稱不能為空", trigger: "blur" },
          { min: 2, max: 20, message: '用戶名稱長度必須介于 2 和 20 之間', trigger: 'blur' }
        ],
    sex: [
          { required: true, message: "性別不能為空", trigger: "blur" }
        ],
    age: [
          { required: true, message: "年齡不能為空", trigger: "blur" },
          { pattern: /^([0-9]|[1-9]\d|[1-9]\d\d)$/, message: '年齡介于 0-999 之間', trigger: 'blur' }
        ]
}

this.$refs.表單ref名稱.validateField(校驗字段);

data(){
  const name = (rule, value, callback) => {
    console.log(rule)
    console.log(value)
    console.log(callback)
    if (this.oldName === value) {
      callback(new Error("新名字不能和舊名字一致"));
    } else {
      callback();
    }
  };
  return {
    rules: {
        name: [
          { required: true, trigger: "blur", message: "請再次輸入新名字" },
          { required: true, validator: name, trigger: "blur" }
        ]
    }
  }