prop中寫驗證rules 裡面的屬性 validator 為自定義驗證名 自定義校驗 callback 必須被呼叫

驗證手機號和電子郵箱

 data() {
      let validatePhone= (rule, value, callback)=>{
        let phoneReg= /^[1][3,4,5,7,8,9][0-9]{9}$/;
        phoneReg.test(value) ? callback() : callback(new Error('請正確填寫手機號'));
      };
      let validateMail=(rule, value, callback)=>{
        　
 
var mailReg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正則表示式
          if(!value){
            //判斷不填寫時不驗證
            callback()
          }else{
            //驗證
             mailReg.test(value) ? callback() : callback(new Error('請正確填寫電子郵箱'));
          }
      };
   
 
return {
      rules: {
          linkPhone: [{
             validator: validatePhone,
             trigger: "blur"
          }],
          email:[{
             validator: validateMail,
             trigger: "blur"
          }]
        }
      };
  }

 <el-col :span="12">
            <el-form-item label="聯絡電話" prop="linkPhone"
 
>          
              <el-input v-model="form.linkPhone" placeholder="請輸入聯絡電話" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="電子郵箱" prop="email">
              <el-input v-model="form.email" placeholder="請輸入電子郵箱" />
            </el-form-item>
 </el-col>