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

轉載于:https://www.cnblogs.com/mengfangui/p/9907783.html

總結

以上是生活随笔為你收集整理的vue 表单 验证 async-validator的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。