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

下面给大家介绍下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 表单验证内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 在Vant的基础上实现添加表单验证框架的方法示例

    Vant 一套基于Vue的移动端UI框架,有赞出品. 因为UI设计的够漂亮,源码结构也比较清晰,插件定位也比较明确,重要是实战过程中的使用体验不错.在最近的项目当中就使用 Vant 作为移动端的基础UI框架,但在实践过程中发现该框架和其他框架有不一样的地方.例如它不内置表单验证,接下来,我把自己实现验证框架的思路分享出来. 分析需求 我们找的插件主要能解决以下问题 支持中文 适应UI框架 分组验证 动态验证(数据动态,规则动态) 去网络上搜索了一些框架,推荐两款(在官方也有推https://cn

  • vant(ZanUi)结合async-validator实现表单验证的方法

    最近在开发一个移动端商城项目,用到了有赞的 vant,因为最近大都采用 element ui在做PC端的东西,对比来说,vant的完成度还是偏低了点,很多细节都虽然都实现了接口,但是想使用得自己去想办法,没办法拿来即用.昨天用到 Uploader 图片上传 如是,提供了file回调,却没有提供上传功能,我必须给他加2个函数实现axios提交才能用,还有今天用到表单验证这块,它的 Field组件虽然给了error-message的错误提示接口,但是没有内置表单验证功能. element ui采用a

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

    下面给大家介绍下vant2 自动检查表单验证 -validate ref 给 <van-form @submit="onSubmit" ref="form"> 标签 : // 检验手机号是否合格 await this.$refs.form.validate("mobile"); data里面定义的规则 rules对象 : rules: { mobile: [ // 必填 { required: true, message: "

  • 详解jQuery的表单验证插件--Validation

    详解jQuery的表单验证插件--Validation

    大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言.该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维护人员.该插件

  • 详解ElementUI之表单验证、数据绑定、路由跳转

    详解ElementUI之表单验证、数据绑定、路由跳转

    1.新建表单组件el-form.vue <template> <div class="form"> <el-form ref="form" :model="UserForm" :rules="this.$store.state.userinfo.CheckRules" label-position="left" label-width="180px">

  • 详解AngularJS实现表单验证

    详解AngularJS实现表单验证

    开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <<input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <<input type="tex

  • 详解hibernate自动创建表的配置

    详解hibernate自动创建表的配置 配置自动创建表: <prop key="hibernate.hbm2ddl.auto">update</prop>//首次创建项目时用,项目稳定后一般注释这里有4个值: update:表示自动根据model对象来更新表结构,启动hibernate时会自动检查数据库,如果缺少表,则自动建表:如果表里缺少列,则自动添加列. 还有其他的参数: create:启动hibernate时,自动删除原来的表,新建所有的表,所以每次启动后

  • Mybatis详解动态SQL以及单表多表查询的应用

    目录 单表查询操作 参数占位符#{}和${} SQL 注入 like模糊查询 多表查询操作 一对一多表查询 一对多多表查询 动态SQL使用 if标签 trim标签 where标签 set标签 foreach标签 单表查询操作 参数占位符#{}和${} #{}:相当于JDBC里面替换占位符的操作方式(#{}->“”).相当于预编译处理(预编译处理可以防止SQL注入问题) ${}:相当于直接替换(desc这种关键字),但这种不能预防SQL注入 select * from userinfo where

  • 第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单.下面逐一给大家介绍,有兴趣的朋友一起学习吧. 创建垂直或基本表单: •·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-cont

  • 详解VScode自动补全CSS3前缀插件以及配置无效的解决办法

    1.在vscode中搜索Autoprofixer 2.在安装完成之后要配置 在需要添加前缀的css文件上,右键点击命令面板,输入Autoprefixer CSS就好啦 ps: 如果想要兼容性最好的话,需要在设置配置文件setting.json里加上 (打开设置->搜索autoprefixer->点击在setting.json里编辑) //这是比较完整的兼容配置,可以根据自己的情况有选择的复制![在这里插入图片描述](https://img-blog.csdnimg.cn/20200322110

  • 详解Java 自动装箱与自动拆箱

    包装器 有些时候,我们需要把类似于int,double这样的基本数据类型转成对象,于是设计者就给每一个基本数据类型都配置了一个对应的类,这些类被称为包装器. 包装器整体来说分为四大种: Number,Number类派生出了Integer,Double,Long,Float,Short,Byte这六个小类分别代表了int,double,long,float,short,byte这六种基本数据类型. Character,对应的基本数据类型是char. Void,对应的是关键字void,这个类我们会经

  • 详解pycharm自动import所需的库的操作方法

    详解pycharm自动import所需的库的操作方法

    快捷键命令 win: Alt + Enter mac: option + Enter 演示操作(以mac为例) 1.未导入包时情景 未导入views包,会有红色下划线标记 2.按option + Enter键唤起菜单 3.选择导入包(Import this name) 4.选择包的地址 5.导入成功,红色下划线消失 到此这篇关于详解pycharm自动import所需的库的操作方法的文章就介绍到这了,更多相关pycharm自动import所需的库内容请搜索我们以前的文章或继续浏览下面的相关文章希望

随机推荐