1. Basic poses/custom poses

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
  <el-form-item label="Activity Name" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
 <el-form-item label="Age" 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-form> </el-form> </el-form> <script> var checkAge = (rule, value, value) callback) => { //console.log(rule.max_age)if(! value) {return callback(new Error('Age cannot be empty'));
     }
     if(! Number.isInteger(value)) { callback(new Error('Please enter a numeric value'));
      } else {
        if (value < rule.max_age) {
          callback(new Error('Must be at least 18 years old'));
        } else{ callback(); }}};export default {
    data() {
      return {
        ruleForm: {
          name: ' ',
          age:' '
        },
        rules: {
          name: [
            { required: true, message: 'Please enter an activity name', trigger: 'blur' },
            { min: 3, max: 5, message: 'Between 3 and 5 characters long', trigger: 'blur'}], age: [{max_age: 18, validator: checkAge, trigger:'blur'}// checkAge custom rule function]}}; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit! ');
          } else {
            console.log('error submit!! ')}}); }, resetForm(formName) { this.$refs[formName].resetFields();
      }
    }
  }
</script>
Copy the code

Rules are bound to el-Form, rLUES are verification rules, and corresponding prop is bound to El-Form-Item. Custom rule validator: checkAge function for custom rules. Without further ado, details can be found in the Element documentation http://element-cn.eleme.io/#/zh-CN/component/form. 2. Check between lines

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="Age"
    prop="age"
    :rules="[{required: true, message: 'Age cannot be empty '}, {type: 'number', message:' Age must be a numeric value '}]">
    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
  </el-form-item>
Copy the code

Rules can be written to their respective el-form-items. 3. Custom verification between lines

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="Age"
    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){// define checkAge rules //console.log(rule-max_age)if(! value) {return callback(new Error('Age cannot be empty'));
       }
       if(! Number.isInteger(value)) { callback(new Error('Please enter a numeric value'));
        } else {
          if (value < rule.max_age) {
            callback(new Error('Must be at least 18 years old'));
          } else{ callback(); }}},... } } </script>Copy the code

4. Custom check between lines

<el-form>
  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label='domain name' + index '
    :key="domain.key"
    :prop="`domains.${index}.value`"// Bind prop :rules="[{required: true, message: 'Domain name cannot be empty ', 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){// Custom checkDomain...... }, submitForm(formName) { this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit! ');
          } else {
            console.log('error submit!! '); }}); } } } </script>Copy the code