vant组件 van-field 在失去焦点时 校验,红字提示
时间: 2024-09-18 21:08:17 浏览: 176
vant 自定义 van-dropdown-item的用法
5星 · 资源好评率100%
Vant UI 的 `van-field` 组件提供了一个内置的输入验证功能,在用户停止编辑字段(失去焦点)时会自动进行校验。当输入不符合设定的规则时,它会显示红色的文字提示,通常用于显示错误信息,比如格式错误、必填项未填写等。
`van-field` 的基本用法包括设置 `rules` 属性,这个属性是一个数组,每个元素可以是一个验证函数或者一个包含两个键 `required` 和 `message` 的对象,表示是否是必填项以及提示消息。例如:
```html
<van-field v-model="username" :rules="[{ required: true, message: '用户名不能为空' }]"></van-field>
```
在这个例子中,如果 `username` 没有值,失去焦点后就会显示 "用户名不能为空" 的错误提示,颜色默认为红色。
如果你需要自定义验证规则或提示样式,还可以通过 Vue 的 `validate` 或者 `validateField` 方法触发手动验证,并传入回调函数来处理验证结果。更多信息可以在 Vant 官方文档中找到:https://vant-contrib.gitee.io/van-field/#/en-us/api
阅读全文