elementUI表單驗證

elementUI表單驗證非常方便，我們直奔主題：

<template>
  <el-form ref="orderForm" :model="orderForm" :rules="addRules" label-width="100px">
    <el-form-item label="聯系人：" prop="contact">
      <el-input v-model="orderForm.contact" type="text" placeholder="請輸入聯系人名稱"></el-input>
    </el-form-item>
    <el-form-item label="聯系電話：" prop="phone">
      <el-input v-model="orderForm.phone" type="text" placeholder="請輸入聯系電話"></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      let validateContact = (rules, value, callback) => {
        if (value === '') {
          callback(new Error('請輸入聯系人姓名'));
        } else {
          // 中文或英文、數字正則
          let regExpr = /^[a-zA-Z0-9 \u4e00-\u9fa5]+$/;
          if(!regExpr.test(value)){
            callback(new Error('聯系人輸入不正確'));
          } else if(value && value.trim().length>30) {
            callback(new Error('長度超出限制'));
          } else {
            this.correct = true; // 標記contact是否校驗通過
            callback();
          }
        }
      };
      let validPhone = (rules, value, callback) => {
        if (value === '') {
          callback(new Error('請輸入手機號'));
        } else {
          if(value){
            value = value.trim();
          }
          let TEL_REGEXP = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
          if(TEL_REGEXP.test(value)) {
            callback(new Error('手機號格式不正確'));
          } else {
            this.phoneCorrect = true; // 標記手機號碼校驗正確
            callback();
          }
        }
      };
      return {
        orderForm: {
          contact: "",
          phone: "",
        },
        addRules: {
          contact: [{ required: true, validator: validateContact, trigger: 'blur'}],
          phone: [{required: true, validator: validPhone, trigger: 'blur'}],
        },
        correct: false, // 校驗是否正確
        phoneCorrect: false, // 校驗手機號碼是否正確
      }
    }
  }
</script>

 

1、驗證表單中的某個字段：

// 驗證contact字段
this.$refs.orderForm.validateField("contact", () => {
    console.log(this.correct);
}); 
// 驗證phone字段
this.$refs.orderForm.validateField("phone", () => {
    console.log(this.phoneCorrect);
}); 

 

2、驗證整個表單：（在提交訂單前驗證）

this.$refs.orderForm.validate(function (valid){
    if(valid){
        // TO DO
    }
});

3、表單重置：

this.$refs.orderForm.resetFields();