element之el-form的各種校驗姿態

1.基礎姿勢/自定義姿勢

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
  <el-form-item label="活動名稱" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
 <el-form-item label="年齡" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即建立</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  var checkAge = (rule, value, callback) => {
    //console.log(rule.max_age)
    if (!value) {
       return callback(new Error('年齡不能為空'));
     }
     if (!Number.isInteger(value)) {
         callback(new Error('請輸入數字值'));
      } else {
        if (value < rule.max_age) {
          callback(new Error('必須年滿18歲'));
        } else {
          callback();
        }
      }
  };
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          age:''
        },
        rules: {
          name: [
            { required: true, message: '請輸入活動名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 5 個字元', trigger: 'blur' }
          ],
          age: [
            {max_age：18， validator: checkAge, trigger: 'blur' }// checkAge自定義規則函式
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!')
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
複製程式碼

在el-form上繫結rules，rlues為校驗規則，在el-form-item上繫結對應的prop。 自定義規則，validator：checkAge，自定義規則的函式。 不囉嗦，詳細的可檢視element文件http://element-cn.eleme.io/#/zh-CN/component/form。 2.行間校驗

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="年齡"
    prop="age"
    :rules="[
      { required: true, message: '年齡不能為空'},
      { type: 'number', message: '年齡必須為數字值'}
    ]">
    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
  </el-form-item>
複製程式碼

可將rule寫在各自的el-form-item上 3.行間自定義校驗

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="年齡"
    prop="age"
    :rules="[
      {max_age：18， validator: checkAge, trigger: 'blur' }
    ]">
    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      ...
    },
    methods: {
      checkAge(rule, value, callback){
       //自定義校驗規則
        //console.log(rule.max_age)
        if (!value) {
           return callback(new Error('年齡不能為空'));
       }
       if (!Number.isInteger(value)) {
         callback(new Error('請輸入數字值'));
        } else {
          if (value < rule.max_age) {
            callback(new Error('必須年滿18歲'));
          } else {
            callback();
          }
        }
      },
      ...... 
    }
  }
</script>
複製程式碼

4.行間迴圈自定義校驗

<el-form>
  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="`domains.${index}.value`" //繫結的prop
    :rules="[
     { required: true, message: '域名不能為空', trigger: 'blur' },
     {reg：/^--------$/， validator: checkDomain, trigger: 'blur' }
    ]"
  >
</el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        dynamicValidateForm: {
          domains: [
            { value: ''},
            { value: ''},
            { value: ''},
          ]
        }
      };
    },
    methods: {
      checkDomain(rule, value, callback){
        //自定義校驗規則
        ......
       },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
          }
        });
      }
    }
  }
</script>
複製程式碼