首页uni-app表单校验有blur触发吗

uni-app表单校验有blur触发吗

时间: 2025-02-07 09:18:55 浏览: 58

### uni-app 中表单校验 Blur 触发支持情况在 `uni-app` 开发框架下，表单组件提供了多种触发校验的方式，其中包括通过失去焦点 (`blur`) 来触发校验的功能[^2]。对于 `<u-form>` 组件而言，默认情况下，当用户离开输入框即发生 `blur` 事件时并不会自动触发字段的校验逻辑。然而，开发者可以通过配置特定选项来改变这一行为。具体来说，在定义表单项时可以设置 `trigger` 属性为 `'blur'` 或者是一个数组包含多个触发条件如 `['change', 'blur']`，从而使得在这些时刻执行相应的验证规则[^5]。下面给出一段简单的代码示例展示如何利用 `blur` 进行即时校验： ```html <u-form :model="form" ref="ruleForm"> <u-form-item label="年龄" prop="age" :rules="[ { required: true, message: '请输入您的年龄'}, ]" trigger="blur"> <u-input type="number" v-model="form.age"></u-input> </u-form-item> </u-form> <script> export default { data() { return { form: { age: '' } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); } } }; </script> ``` 此段代码展示了如何在一个表单内针对某个具体的输入项（这里是以年龄为例），设定其在校验过程中不仅会在提交时被检验，而且每当该输入域失焦(`blur`)也会立即启动对应的校验流程。

阅读全文