vue 表单 验证 async-validator

1、使用插件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-itemlabel="年龄"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: '年龄必须为数字值'}
像校验邮箱、数值类型类型时，多行配置校验规则。