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. 8、IDEA集成Git

    8.1.配置Git忽略文件 8.1.1.忽略文件的原因 在使用 IDE 工具时,会自动生成一些和项目源码无关的文件,所以可以让 Git 忽略这些文件. 此外,把这些无关文件忽略掉,还能够屏蔽不同 ID ...

  2. TinyVue v3.17.0 正式发布,推出了一款基于 Quill 2.0 的富文本编辑器,功能强大、开箱即用!

    你好,我是 Kagol. 我们非常高兴地宣布,2024年6月26日,TinyVue 发布了 v3.17.0 . TinyVue 每次大版本发布,都会给大家带来一些实用的新特性,上一个版本我们重构了 c ...

  3. 为什么要使用工业仿真软件? —— CAE(Computer Aided Engineering)工程设计中的计算机辅助工程

    CAE技术: 引自: https://baike.baidu.com/item/CAE技术/18884456?fr=ge_ala 引自: https://www.mscsoftware.com.cn/ ...

  4. NVIDIA具身机器人实验室 —— GEAR —— Generalist Embodied Agent Research —— NVIDIA机器人实验室

    相关: https://www.youtube.com/watch?v=jbJPG2H8hn4

  5. gym库中from gym.wrappers import FlattenObservation的理解

    看代码的过程中看到有这样的调用: from gym.wrappers import FlattenObservation if sinstance(env.observation_space, gym ...

  6. dsu on tree 模板

    dsu on tree模板运用 例题以及代码: U41492 树上数颜色 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 记录详情 - 洛谷 | 计算机科学教育新生态 (luogu. ...

  7. CC2530系列课程 | IAR新建一个工程

    之前录制了无线传感网综合项目实战课程,这个课程非常适合应届毕业生和想转行Linux的朋友,用来增加项目经验. 其中一部分内容是关于CC2530+zigbee的知识,后面会更新几篇关于cc2530的文章 ...

  8. MFC中CString转int,double

    CString str=L"123"; int n=_wtoi(str); //n=123 double d=_wtof(str); //d=123.0000 Vs2012中编译

  9. STL 改造红黑树 模拟封装set和map

    改造红黑树 目录 改造红黑树 适配STL迭代器的红黑树 基本结构 RBTreeNode __RBTree_iterator RBTree 完整代码 封装的set 封装的map 在初次看STL中实现红黑 ...

  10. 利用分布式锁在ASP.NET Core中实现防抖

    前言 在 Web 应用开发过程中,防抖(Debounce) 是确保同一操作在短时间内不会被重复触发的一种有效手段.常见的场景包括防止用户在短时间内重复提交表单,或者避免多次点击按钮导致后台服务执行多次 ...