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 自动检查表单验证 -validate的更多相关文章

  1. v-show和element中表单验证validate起到的化学反应

    说起v-show和v-if,进行前端开发的大家一定不会陌生,他们都是用来控制标签元素的显示与隐藏的,他们的区别就是v-show会把标签渲染出来,只是会隐藏起来,相当于visibility:hidden ...

  2. lumen手记:自定义Validate表单验证

    版权声明:本文为博主原创文章,未经博主允许不得转载. 今天开始跳lumen的表单验证Validate类的坑,确实好坑!!! 首先,lumen的表单验证返回是无状态的json格式api,这... 所有开 ...

  3. jQuery Validation Engine 表单验证

    功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. 兼容 IE 6+, Chrome, ...

  4. Validation Engine 表单验证

    前端开发仓库 » jQuery » jQuery Validation Engine 表单验证 jQuery Validation Engine 表单验证来源 功能强大的 jQuery 表单验证插件, ...

  5. 表单验证——JavaScript和Jquery版

    1.轻量级的JavaScript表单验证 在应用中引用 validator.min.js 文件 <script type="text/javascript" src=&quo ...

  6. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  7. 表单验证——jquery validate使用说明【另一个教程】

    [参考:http://www.tuicool.com/articles/y6fyme] jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证 ...

  8. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  9. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  10. 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是介绍两个最常用的jQuery插件. 分别用 ...

随机推荐

  1. MapGIS路网数据发布

    准备 1.MapGIS 10 桌面版(我用的10.5.6.10) 2.路网的shp文件 数据导入 1.创建要素集,如果已有要素集可以不用创建: 2.导入路网要素类,选择准备好的shp文件后导入即可: ...

  2. 【ElasticSearch】01 CRUD操作

    1.资料: ES官网最新版本下载地址: https://www.elastic.co/cn/downloads/elasticsearch 历史版本下载: https://www.elastic.co ...

  3. 【Mybatis】06 Session获取 & 配置参数总结

    会话获取 SqlSessionFactory 最佳的获取方式就是使用Mybatis提供的资源类加载配置文件 调用会话工厂建造者实例的建造方法注入读取流 要注意的是建造者生成了了实例就可以不需要了 这里 ...

  4. 如何理解计算机类论文、机器学习论文、人工智能AI论文中的“soft”和“hard”呢?

    如何理解计算机类论文.机器学习论文.人工智能AI论文中的"soft"和"hard"呢? 最近在看论文中总看到带有"soft"和"h ...

  5. java零基础到架构师学习线路(附视频教程)

    1.背景 很多人都在问,如何学java,要学那些内容,感觉学起来很痛苦,没得方向,学到什么程度才可以去找工作等, 在这里我以自己的学习经验工作经验和辅导学生的经验给大家梳理了一个学习线路和准备了我自己 ...

  6. 深度解读昇腾CANN小shape算子计算优化技术,进一步减少调度开销

    摘要:Host调度模式下,GE将模型中算子的执行单元划分为Host CPU执行与Device(昇腾AI处理器)执行两大类. 本文分享自华为云社区<深度解读昇腾CANN小shape算子计算优化技术 ...

  7. 讲师招募 | Apache DolphinScheduler Meetup诚邀您共建开源!

    随着Apache DolphinScheduler在全球范围内的快速发展,我们的用户群体和社区活动也在不断扩大. 为了进一步丰富我们的社区内容,分享更多有价值的知识和经验,我们诚挚地邀请您加入我们,成 ...

  8. 一文讲透CRC校验码-附赠C语言实例

    一口君最近工作用到CRC校验,顺便整理本篇文章和大家一起研究. 一.CRC概念 1. 什么是CRC? CRC(Cyclic Redundancy Checksum)是一种纠错技术,代表循环冗余校验和. ...

  9. yum下载包保存到本地

    1.使用yumdownloadonly下载RPM包及依赖包 #下载yumdownloadonly插件 yum install yum-plugin-downloadonly # yum 下载rpm包到 ...

  10. idea下spring切换jdk版本

    1.首先打开项目配置设置 2. 修改project中的配置 3. 修改modules中的配置 这个方法不需要修改pom.xml文件 如果有问题请指正   及时修改 2022年9月10日16:42:16