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. 【PostgreSQL】下载安装PgSQL

    官网下载地址: https://www.enterprisedb.com/downloads/postgres-postgresql-downloads Windows平台 官网直接提供exe安装包, ...

  2. 【Java】File 文件类

    File 文件类 File类的一个对象,代表了一个文件和一个文件目录/文件夹 File类所属在java.io 的包下 构造器部分 - 以parent为父文件,child为子路径创建File对象,可以理 ...

  3. 【MySQL】JSON相关

    一些概念 MySQL里的json分为json array和json object. $表示整个json对象,在索引数据时用下标(对于json array,从0开始)或键值(对于json object, ...

  4. python绘图库matplotlib:刻度线的方向调整, in, out, inout

    前文相关: python绘图库matplotlib:画线的标志marker的设置--类型/size/空心/边线颜色及大小/显示marker超出边界部分 由于工作需要经常用matplotlib来绘图,但 ...

  5. [学习笔记] 单调队列优化DP - DP

    单调队列优化DP 简单好想的DP优化 真正的教育是把学过的知识忘掉后剩下的东西 -- *** 对于一个转移方程类似于 \(dp[i]=max(min)\{dp[j]+b[j]+a[i]\}\ \ x_ ...

  6. HTML+CSS+JS实现的贪吃球小游戏【转】

    转载地址:[https://blog.csdn.net/qq_43115104/article/details/84228987] <!DOCTYPE html> <html> ...

  7. 神经网络之卷积篇:详解Padding

    详解Padding 为了构建深度神经网络,需要学会使用的一个基本的卷积操作就是padding,让来看看它是如何工作的. 如果用一个3×3的过滤器卷积一个6×6的图像,最后会得到一个4×4的输出,也就是 ...

  8. P7706 文文的摄影布置 题解

    P7706 文文的摄影布置 题解 原题 读完题,发现是线段树.单点修改+区间查询. 不过查询的值有些奇怪,就是了,我们考虑用线段树维护这个 ψ 值(下称待求值). 对于一个区间的待求值,大概有四种情况 ...

  9. Devexpress GridView 单元格输入检验

    实现效果 打开设计器 找到CellValueChanged事件 编写代码 private void gvmain_CellValueChanged(object sender, DevExpress. ...

  10. Python中的分布式框架Ray的安装与使用

    技术背景 假设我们在一个局域网内有多台工作站(不是服务器),那么有没有一个简单的方案可以实现一个小集群,提交分布式的任务呢?Ray为我们提供了一个很好的解决方案,允许你通过conda和Python灵活 ...