表单验证的trigger能否重写

开发中遇到自定义的非标准的输入组件,发现trigger:change不能按理想的方式触发【我添加删除功能,点删除时,不会触发change】,于是我想能不能重写trigger。

后来我发现另一种思路:在合适的触发change事件。这完美地解决了我的问题。nice!参看链接:https://blog.youkuaiyun.com/weixin_43908123/article/details/108755594

### uView UI 表单必填项标记(红星) 在uView UI框架中,对于表单组件中的必填项标记(通常为红色星号),可以通过特定属性来控制其显示与否。不同于Element UI,在uView UI里设置必填项的标志主要依赖于`<u--input>`或其他输入类组件配合<u-form>及其子组件<u-form-item>的相关配置。 为了使某个字段成为必填项并展示相应的提示符(如红星),需遵循如下方式: - 使用`<u-form>`包裹整个表单项结构。 - 对应每一个需要验证的输入框使用`<u-form-item>`标签,并为其指定`prop`属性指向具体的数据模型路径。 - 设置`rules`对象定义各字段的验证规则;其中`required: true`表示该字段为必填项[^1]。 当希望仅改变视觉上的必填标识而不影响实际验证逻辑时,可以考虑通过CSS样式调整默认渲染的小红心位置或颜色等特性。然而,就目前版本而言,uView并没有像Element UI那样提供直接隐藏星号的同时保留验证功能的内置参数(例如`hide-required-asterisk`)。因此,如果想要移除红星但仍保持必要的业务校验,则可能涉及到更复杂的自定义处理,比如重写模板或者利用插槽机制来自定义表单项的内容布局[^2]。 另外值得注意的是,某些情况下即使设置了`required: true`也可能不会立即显示出预期的效果——这是因为还需要确保对应的HTML元素确实绑定了正确的`v-model`指令并与数据源建立了双向绑定关系[^3]。 ```html <!-- 示例代码 --> <u-form ref="form" :model="formData" :rules="rules"> <!-- 下面这个例子展示了如何创建一个带有红星标记的必填文本框 --> <u-form-item label="姓名:" prop="name"> <u--input v-model="formData.name"></u--input> </u-form-item> </u-form> <script setup lang="ts"> import { reactive } from 'vue'; const formData = reactive({ name: '' }); // 定义验证规则 const rules = { name: [ { required: true, message: '请输入您的名字', trigger: ['change','blur'] } ] }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值