一、表单格式固定的添加表单验证文章来源：https://www.toymoban.com/news/detail-769754.html
<template>
<el-form ref="addForm" :model="form" label-width="100px" :rules="addRules">
<el-form-item label="名称" prop="name" >
<el-input v-model="addForm.telNumber"></el-input>
</el-form-item>
</el-form>
</template>
data () {
return {
addForm: {
name:''，//名称
},
addRules: {
name:[{ required: true, message: "名称不能为空", trigger: "blur" }],
}
}
}二、动态增加表单，添加表单验证文章来源地址https://www.toymoban.com/news/detail-769754.html
<template>
<el-form ref="form" :model="addForm" label-width="100px" :rules="addRules">
<el-form-item v-for="(item,index) in addForm.nameList"
label="名称数组对象"
:prop="'nameList.'+ index +'.name'"
:rules="addRules.name">
<el-input v-model="item.name"></el-input>
</el-form-item>
</el-form>
</template>
data () {
return {
addForm: {
nameList:[
{name:''}
]
},
addRules: {
name:[{ required: true, message: "名称不能为空", trigger: "blur" }],
}
}
}到了这里，关于vue中elment-ui添加表单验证规则，以及动态增加的表单校验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
