vue中表单验证规则:ruleValidate中一个字段是否必填由另一个字段决定
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
根据subjectNo的填写情况来动态设置softName的必填属性
1.html中写法
<template>
<el-form :model="formData" :rules="ruleValidate">
<el-form-item label="课题编号" prop="subjectNo">
<el-input v-model="formData.subjectNo"></el-input>
</el-form-item>
<el-form-item label="软件名称" prop="softName" :rules="dynamicSoftNameRule">
<el-input v-model="formData.softName"></el-input>
</el-form-item>
</el-form></template>
2.script中配置
import cloneDeep from 'lodash/cloneDeep'; // 导入lodash库中的cloneDeep方法
data() {
return {
ruleValidate: {
subjectNo: [
{
required: true,
message: "课题编号不能为空",
trigger: "blur",
},
],
softName: [
{
required: false, // 初始状态下,softName 不需要填写
message: "软件名称不能为空",
trigger: "blur",
},
],
},
formData: {
subjectNo: "",
softName: "",
},
};
},
computed: {
dynamicSoftNameRule() {
const rules = cloneDeep(this.ruleValidate.softName); // 使用cloneDeep进行深拷贝; // 创建一个规则数组的副本
// 如果 subjectNo 填写了,则将 softName 设置为必填
if (this.formData.subjectNo) {
rules[0].required = true;
}
return rules;
},
},
3.解释
在上述代码中,我们创建了一个名为dynamicSoftNameRule的计算属性。这个计算属性会根据subjectNo字段的填写情况动态设置softName字段的必填属性。
注意,我们使用了cloneDeep(...this.ruleValidate.softName)创建了一个softName规则数组的副本,以避免直接修改原始的ruleValidate对象。
然后,我们在模板中将dynamicSoftNameRule应用到softName字段的验证规则上:
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)