vant2表单组件Field在iOS上校验出错

最新推荐文章于 2025-04-23 20:14:01 发布

小刘今天学前端了吗

最新推荐文章于 2025-04-23 20:14:01 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：错误处理文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_43389779/article/details/126768193

错误处理专栏收录该内容

11 篇文章

订阅专栏

博客讲述了在iOS系统中使用正则表达式进行输入校验时遇到的问题，即输入任何字符都会触发错误提示。原因是iOS输入法可能引入特殊字符。解决方案包括监听输入并去除特殊字符实时校验，以及在提交时使用自定义validator方法进行校验。

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

问题描述

需要校验用户的输入，长度超出进行错误提示，所以使用了正则表达式进行校验，代码如下。

<van-field v-model="location" name="location" label="地点" placeholder="请输入出差地" :rules="[{ required: true, pattern: /^\S{1,7}$/g, message: '请输入7个以内字符' }]" />

在安卓手机上可以正常校验，但iOS系统无论输入几个字符都会提示错误，原因可能是iOS输入法会输入特殊字符

解决方法

监听输入，去掉其中的特殊字符再进行判断（实时校验）

watch: {
    location(val) {
      if (val.replace(/\s/g, '').length > 7) {
      	// 添加错误处理
      	// ....
        Toast.fail('长度超出')
        this.locationError = true
      } else {
        this.locationError = false
      }
    }
}

定义组件rules的validator方法（点击提交时触发校验）

<van-field v-model="location" name="location" label="地点" placeholder="请输入出差地" :rules="[{ required: true, validator, message: '请输入7个以内字符' }]" />

validator(val) {
	return val.replace(/\s/g, '').length > 7 ? false : true
}