您现在的位置是：网站首页> 编程资料编程资料

详解vant2 自动检查表单验证 -validate_React_

2023-05-24 533人已围观

简介详解vant2 自动检查表单验证 -validate_React_

下面给大家介绍下vant2 自动检查表单验证 -validate

ref 给

标签；

// 检验手机号是否合格 await this.$refs.form.validate("mobile");

data里面定义的规则 rules对象；

rules: { mobile: [ // 必填 { required: true, message: "请填写用户名" }, // 1 3-9 开头 在家 9 个0-9数字 { pattern: /^1[3-9]\d{9}$/, message: "手机号不正确" }, ], code: [ { required: true, message: "请填写密码" }, { pattern: /\d{6}$/, message: "验证码错误" }, ], },

使用规则：

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

问题描述

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

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

解决方法

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

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

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

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

到此这篇关于vant2 自动检查表单验证 -validate的文章就介绍到这了,更多相关vant2 表单验证内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：vue中为何方法要写在methods的里面_vue.js_

下一篇：运行npm run dev报错的原因及解决_vue.js_

您现在的位置是：网站首页> 编程资料编程资料

详解vant2 自动检查表单验证 -validate_React_

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

问题描述

解决方法

相关内容

点击排行

本栏推荐

猜你喜欢