el-form表单rules验证

在Vue.js应用中,作者遇到一个表单验证问题,当输入信息后仍然显示错误提示。问题根源在于el-form-item的prop属性引用了错误的数据路径,应指向formInfo.address.username,而ref用于验证的关联。修正方法是删除el-form-item的prop属性,直接使用v-model绑定的数据路径进行验证。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天在工作中遇到一个小问题,绑定的rules验证出现一个小Bug,验证规则和绑定的表单都正确,但是为什么输入完信息之后还是会提示错误输入时候的提示信息?

Bug重现:项目联系人只添加一个require验证规则,在输入框中我明明输入进去了,但是为什么还是会提醒我错误提示信息?

找了一会原因发现是因为el-form-item中的prop和ref用错了,prop是form表单绑定的formInfo对象中第一层的数据,ref是form表单绑定rules时为了确认验证的某一项而临时建立的连接。

el-input双向绑定的值传入到formInfo第二层的address对象里,所以输入框失焦时候验证的时formInfo.username,而不是formInfo.address.username,此时formInfo.username为空,所以验证失败。

<el-form :model="formInfo" :rules="rules" ref="form" label-width="150px">
    <el-form-item label="项目联系人:" prop="username" ref="username">
         <el-input v-model="formInfo.address.username" placeholder="请输入项目联系人(可选择地址带出)" size="small" @change="changeinput"></el-input>
    </el-form-item>
</el-form>

data() {
    return {
      formInfo: {
				paymethod:'1',
				deliverymethod:'1',
				address: {}
			},
      rules: {
        projectname: [ { required: true, message: '请输入项目名称', trigger: 'blur' }],
        username: [ { required: true, message: '请输入项目联系人', trigger: ['blur'] }],
        mobile: [ { required: true, message: '请输入联系电话', trigger: ['blur'] }],
        addressinfo: [ { required: true, message: '请填写详细地址', trigger: 'blur' }],
        deliveryperiod: [ { required: true, message: '请输入交货期限', trigger: 'blur' }],
      },
};

解决方法就是:直接删除el-form-item中的prop就可以了。

<el-form-item label="项目联系人:" ref="username">
         <el-input v-model="formInfo.address.username" placeholder="请输入项目联系人(可选择地址带出)" size="small"></el-input>
</el-form-item>

### 如何在 `el-form` 中为 `el-tree` 组件配置和使用自定义验证规则 为了实现在 `Element UI` 的 `el-form` 表单中对 `el-tree` 组件应用验证规则,可以按照如下方法操作: #### 定义表单模型与初始状态 创建一个用于存储树形控件选中节点的数据字段,在初始化时设定为空或默认值。 ```javascript data() { return { form: { treeSelection: [] // 存储被选中的节点ID列表或其他标识符 }, rules: { /* 验证规则 */ } }; } ``` #### 设置验证规则 对于 `el-tree` 控件而言,通常会关注是否有选项被勾选。因此可以在 `rules` 属性下针对上述定义的 `treeSelection` 字段指定相应的校验逻辑[^1]。 ```javascript rules: { treeSelection: [ { required: true, message: '请选择至少一项', trigger: ['change'] } // 当触发条件满足时执行此条规则 ] }, ``` #### 自定义验证函数 如果需要更复杂的业务场景下的验证,则可以通过编写自定义验证器来完成特定需求。这允许开发者根据实际应用场景灵活调整验证行为。 ```javascript methods: { validateTree(value, callback) { if (this.form.treeSelection.length === 0) { callback(new Error('必须选择至少一个节点')); } else { // 进行其他复杂判断... callback(); } } } // 将其加入到rulesrules: { treeSelection: [{ validator: this.validateTree, trigger: ['blur', 'change'] }] } ``` #### 使用 `el-tree` 和关联至 `el-form-item` 最后一步是在模板部分正确地将这些元素组合起来,并确保它们之间能够正常交互工作。 ```html <el-form :model="form" :rules="rules" ref="ruleForm"> <!-- ... --> <el-form-item label="树形结构:" prop="treeSelection"> <el-tree show-checkbox node-key="id" :default-checked-keys="form.treeSelection" @check-change="(nodeObj, checked) => handleCheckChange(nodeObj, checked)" :data="treeData"></el-tree> </el-form-item> <!-- ... --> </el-form> ``` 在此基础上还需要处理当用户改变选择时更新表单域的状态,即实现 `handleCheckChange()` 方法以便同步最新的选择情况给 `form.treeSelection` 变量。 ```javascript methods: { handleCheckChange(data, checked) { const selectedKeys = []; function traverse(nodes) { nodes.forEach((node) => { if (node.checked || (checked && data.id === node.id)) { selectedKeys.push(node.id); } if (node.children && node.children.length > 0) { traverse(node.children); } }); } traverse(this.$refs.ruleForm.getCheckedNodes()); this.form.treeSelection = [...new Set(selectedKeys)]; } } ``` 通过这种方式就可以有效地把 `el-tree` 节点的选择状况纳入整个表单提交前后的合法性检查流程之中了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值