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. SLF4J2.0.x与Logback1.3.x的绑定变动还是很大的,不要乱点鸳鸯谱

    开心一刻 今天跟我姐聊天 我:我喜欢上了我们公司的一个女同事,她好漂亮,我心动了,怎么办 姐:喜欢一个女孩子不能只看她的外表 我:我知道,还要看她的内在嘛 姐:你想多了,还要看看自己的外表 背景介绍 ...

  2. javaDoc生成方式

    命令行生成 在cmd控制台窗口上找到需要生成文件的路径,然后执行命令. # javadoc -encoding UTF-8 -charset UTF-8 文件名 javadoc -encoding U ...

  3. 【Java】【常用类】LocalDateTime 当前日期时间类 相关

    LocalDate主要的三个API类: java.time.LocalDate; java.time.LocalDateTime; java.time.LocalTime; LocatDate对象获取 ...

  4. 【Uni-App】底部栏踩坑

    一.Page.json一定要注册这个页面 Uni-App通过page.json找到,解析不到这个页面文件是没用的 二.配置tabBar属性 "tabBar":{ "col ...

  5. Audio2Gesture:NVIDIA 黄仁勋的3D虚拟人技术 —— 元宇宙

    相关: https://www.nvidia.com/en-us/on-demand/session/omniverse2020-om1573/ https://www.nvidia.com/zh-t ...

  6. 【转载】 NVIDIA RTX2080ti不支持P2P Access,这是真的么?

    原文地址: http://www.gpus.cn/gpus_list_page_techno_support_content?id=30 ------------------------------- ...

  7. 读《PyTorch + NumPy这么做会降低模型准确率,这是bug还是预期功能?》

    看了文章: [转载] 浅谈PyTorch的可重复性问题(如何使实验结果可复现) 然后,转到: PyTorch + NumPy这么做会降低模型准确率,这是bug还是预期功能? 发现了在pytorch中的 ...

  8. 支付宝支付java版实战(含视频讲解)

    1.背景 实际开发中用到支付宝支付的概念非常大...... 这里重点分析一下支付宝支付实际生产必须要实现的功能 1.获取支付链接(统一下单) 2.支付回调(异步通知) 3.统一下单交易查询 4.退款 ...

  9. 9组-Alpha冲刺-5/6

    一.基本情况 队名:不行就摆了吧 组长博客: https://www.cnblogs.com/Microsoft-hc/p/15546711.html 小组人数: 8 二.冲刺概况汇报 谢小龙 过去两 ...

  10. IP一致性论文

    IP一致性:指的是给定输入的图像,要求保持图像中的ID不变,IP可能是Identity Property,要求能够识别出是同一个身份. 目前通过IP的一致性技术,可以用于短视频短剧上,是一个新兴的市场 ...