element-plus的form表单验证Prop和Rules设置约定-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-plus的form表单验证Prop和Rules设置约定。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在使用表单验证过程中遇到深层对象(即嵌套对象)和数组或动态创建数组对象时验证不再起作用或者出现错误。

官网的说明“Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。更多高级用法可参考 async-validator。”轻描淡写，看了asyncValidator也没有搞清楚element-plus的rules到底该如何定义。

说明：Form组件包含rules属性，FormItem 组件包含prop和rules属性。Form的rules如不设置则不会触发任何验证，FormItem如不设置则当前item不会触发验证。

默认约定的验证规则是通过formitem设置的prop作为path去form绑定的model和rules中查找对应的值和验证规则。如果不能从model或rules找到对应的属性则不会触发验证机制；如果formitem额外指定了rules则使用额外指定的rules做为验证规则，而忽略从form的rules中查找规则。所以如果formitem同时指定了prop和rules则form的rules可以任意设置。

基于以上规则rules的结构定义必须与model完全匹配，否则必须额外指定rules验证才能生效。

prop作为查找model和rules的路径那到底该怎么定义？关于prop作为path的解释参考

举个例子：

{
    const formModel = ref({
        name:"",
        age:0,
        skills:[{name:"",level:0}]
    })

    const rules:{
        name:[{max:8,required:true,message:"name is required",trigger:"blur"}}],
        nameAgain:[{max:8,required:true,message:"name is required",trigger:"blur"}}],
        skills:{
            name:[{max:20,requeired:true,message:"skill name is required",trigger:"blur"}]
            level:[{requeired:true,message:"skill level is required",trigger:"blur"}]
        }
    }
}

<el-form  abel-width="auto" ref="formRef" :rules="rules" :model="formModel"> 
    <el-form-item prop="name" label="角色名称">
         <el-input v-model="model.name" maxlength="16" clearable></el-input>
    </el-form-item>
    <el-form-item label="角色年龄">
         <el-input v-model="model.age" clearable></el-input>
    </el-form-item>
    <el-form-item prop="skills[0].name" :rules="rules.skills.name" label="第一个技能名称">
         <el-input v-model="model[0]!.name" clearable></el-input>
    </el-form-item>
    <el-form-item prop="skills.0.level" :rules="rules.skills.level" label="第一个技能等级">
         <el-input v-model="model[0]!.level" clearable></el-input>
    </el-form-item>
</el-form>

单独指定formItem的rules：

<el-form-item prop="name" label="角色名称">可以定义成<el-form-item prop="name" :rules= "rules.nameAgain" label="角色名称"> 此时通过model.name查找值，通过rules.nameAgain查找验证规则。

模型的数组结构skills验证时通过props ="skills[0].name" 或props ="skills.0.name"来定义path都是有效的,但无法正确获取到rules中对应的规则;并且也不会去定义和model结构一直的数组，所以需要单独设置:rules="rules.skills.name"。文章来源地址https://www.toymoban.com/news/detail-568369.html

到了这里，关于element-plus的form表单验证Prop和Rules设置约定的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！