使用Vant组件库，van-filed配置手机号验证规则

1.安装vant

yarn add vant /npm i vant

2.main.js目录下

// 导入vantimport Vant from 'vant'// 加vant 全局样式import 'vant/lib/index.css'//使用Vant
Vue.use(Vant)

3.使用

3.1 van-filed中添加name属性,并且引入验证规则。

3.2定义验证规则：手机号必须11位

 // 定义校验规则userForm: {mobile: [{ required: true, message: '必填项！' },{validator: (val) => {return val.length === 11},message: '长度必须11位'}],
}

4.效果展示

5.最后想给大家说，这只是一个简单的用法，想要使用更多的方法大家可以参考官网去配置自己的规则。

vant访问：Vant - 轻量、可靠的移动端组件库 (gitee.io)

使用Vant组件库，van-filed配置手机号验证规则相关推荐

使用原生开发高仿瑞幸小程序（一）：使用 Vant 组件库和配置多页面
本文由图雀社区认证作者曾伟@喵先森写作而成,图雀社区将连载其使用原生开发高仿瑞幸小程序系列,点击阅读原文查看作者的 infoQ 链接,感谢作者的优质输出,让我们的技术世界变得更加美好???? 源 ...
基于Vue结合Vant组件库的仿电影APP
Vue综合案例 Vue综合案例一.项目概要 1.效果前瞻 2.开发流程 3.开发环境二.初始化及必要知识点 1.初始化远程仓库 2.创建项目 3.路由规划 4.反向代理配置 5.网络请求封装 6. ...
微信小程序（五）--- Vant组件库，API Promise化，MboX全局数据共享，分包相关
目录一.npm包 1.Vant Weapp (1)安装Vant组件库 (2)使用Vant组件 (3)定制全局主题样式 2.API Promise化 (1)基于回调函数的异步API的缺点 (2)API ...
【Vue知识点- No8.】网易云音乐案例（vant组件库的使用）
No8.网易云音乐案例知识点自测知道reset.css和flexible.js的作用. 什么是组件库-例如bootstrap的作用. yarn命令的使用. 组件名字用name属性方式注册. 如何自 ...
【Vue知识点- No7.】路由、vant组件库的使用
No7.路由.vant组件库的使用学习目标 1.能够了解单页面应用概念和优缺点 2.能够掌握vue-router路由系统使用 3.能够掌握链接导航和编程式导航用法 4.能够掌握路由嵌套和路由守卫 5 ...
微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
微信小程序调用Vant组件库
微信小程序调用Vant组件库 Vant Weapp 微信小程序引入Vant Weapp 调用Vant Weapp组件 Vant Weapp 轻量.可靠的小程序 UI 组件库链接: vant开发指南. ...
微信小程序中引用vant组件库
步骤 1.vant组件库里面也有说明,它说package.json 和 node_modulles 必须在miniprogram目录下,可是一般你刚新建一个小程序项目的时候,是没有package.js ...
微信小程序引入Vant组件库
前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...

使用Vant组件库，van-filed配置手机号验证规则

使用Vant组件库，van-filed配置手机号验证规则相关推荐

最新文章

热门文章