vant2的详细使用教程是怎样的？

本文共计532个文字，预计阅读时间需要3分钟。

以下是对原文的简化

markdown在`van-form`组件中，使用`@submit`事件和`ref`绑定表单提交。验证手机号格式：javascriptawait this.$refs.form.validate('mobile');其中，`data`中定义的`rules`对象包含验证规则：javascriptrules: 手机号规则

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

ref 给

<van-form @submit="onSubmit" ref="form"> 标签 ；

// 检验手机号是否合格 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: "验证码错误" }, ], },

使用规则：

<van-field v-model="user.mobile" name="mobile" icon-prefix="zlx" left-icon="shouji" maxlength="11" placeholder="请输入手机号" :rules="rules.mobile" />

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

问题描述

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

<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 }

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