vue 表单 验证 async-validator

1、使用插件​​async-validator​​

​https://github.com/yiminghe/async-validator">​async-validator​​​ 地址：​​https://github.com/yiminghe/async-validator​​

2、示例（vue+element-ui）

<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>   <el-form-item>     <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>     <el-button @click="resetForm('numberValidateForm')">重置</el-button>   </el-form-item> </el-form> <script>   export default {     data() {       return {         numberValidateForm: {           age: ''         }       };     },     methods: {       submitForm(formName) {         this.$refs[formName].validate((valid) => {           if (valid) {             alert('submit!');           } else {             console.log('error submit!!');             return false;           }         });       },       resetForm(formName) {         this.$refs[formName].resetFields();       }     }   } </script>

注意校验书写格式：

{ required: true, message: '年龄不能为空'},
{ type: 'number', message: '年龄必须为数字值'}

像校验邮箱、数值类型类型时，多行配置校验规则。

作者：孟繁贵