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: '年齡必須為數(shù)字值'}]"><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>

注意校驗(yàn)書寫格式：

{ required: true, message: '年齡不能為空'}, { type: 'number', message: '年齡必須為數(shù)字值'}
像校驗(yàn)郵箱、數(shù)值類型類型時(shí)，多行配置校驗(yàn)規(guī)則。

轉(zhuǎn)載于:https://www.cnblogs.com/mengfangui/p/9907783.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。