el-form form validation

<el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="60px" @keyup.enter.native="dataFormSubmitHandle()">
<el-form-item prop="name" label="姓名">
    <el-input v-model="dataForm.name" placeholder="姓名" />
</el-form-item>
<el-form-item prop="email" label="邮箱">
    <el-input v-model="dataForm.email" placeholder="邮箱" />
</el-form-item>
<el-form-item label="年龄" prop="age">
    <el-input v-model.number="dataForm.age"></el-input>
</el-form-item>
<el-form-item>
    <el-button type="primary" @click="dataFormSubmitHandle()">确认</el-button>
    <el-button @click="resetForm()"></>EL-Button</Reset
EL-form-Item > 
</ EL-form > 

< Script > 
  var of CheckAge = (rule, value, the callback) => {
     IF ( ! value) {
        return the callback ( new new Error ( ' age, can not be empty ' )); 
     } 
     IF ( ! Number.isInteger (value)) { 
         the callback ( new new Error ( ' Please input digital value ' )); 
      } the else {
         IF (value < rule.max_age) {
          the callback ( new new Error ( ' must be at least 18 years ' )); 
        } the else { 
          the callback (); 
        } 
      } 
  }; 
  Export default { 
    Data () { 
      return { 
        DataForm: { 
          name: '' , 
          In Email: '' , 
          Age: '' 
        }, 
        the rules: { 
          name: [ 
            {required: to true , Message: ' Please enter your name ' , Trigger: ' Blur '}, 
            {Min: . 3 , max: . 5 , Message: ' length of 3-5 characters ' , Trigger: ' Blur ' } 
          ], 
          In Email: [ 
           {required: to true , Message: ' Please enter the email address ' , Trigger: ' Blur ' }, 
           {type: ' in email ' , Message: ' Please input the correct email address ' , Trigger: [ ' Blur ' , ' Change ' ] }
          ],
          age: [
            {max_age：18， validator: checkAge, trigger: 'blur' }// checkAge自定义规则函数
          ]
        }
      };
    },
    methods: {
      dataFormSubmitHandle() {
        this.$refs.dataForm.validate(valid => {
        if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!')
          }
        });
      },
      resetForm() {
        this.$refs.dataForm.resetFields();
      }
    }
  }
</script>

 

Detailed documentation can be viewed element   https://element.eleme.cn/#/zh-CN/component/form