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: '年齡必須為數字值'}
像校驗郵箱、數值類型類型時，多行配置校驗規則。