Vant async-validator 表单校验
感谢:尤大大的 vue、有赞的 vant、async-validator、以及 asseek
链接:https://www.jianshu.com/p/d58fe749b97f
在下不才在 asseek 的基础上加入了一些自己的想法有了现在的版本。
抛砖引玉请多多提点。
修正内容:
Promise 代替 callback
添加 Proxy 实现校验的自动触发
精简部分代码以期降低阅读难度
目的:
自动校验、手动校验、校验错误信息展示
规则声明:
<van-field :error-message="validator.ErrMsg.telNumber" v-model="formData.telNumber"
required clearable label="手机号"
icon="question" placeholder="请填写正确有效的手机号"
@click-icon="$toast('请填写正确有效的手机号')" />
data:()=>({
// 验证对象
validator: undefined,
// 表单数据源
formData: {
// 车牌号
carNumber: '鲁B',
// 手机号
telNumber: undefined
},
// 校验
rules: {
carNumber: [
{ required: true, message: '请输入鲁B/鲁U开头完整车牌号' },
{
validator: (rule, value, callBack) => {
/^[鲁]{1}[B|U]{1}[A-Z0-9]{5,6}$/.test(value) ? callBack() : callBack('请输入鲁B/鲁U开头完整车牌号')
}
}
],
telNumber: [
{
validator: (rule, value, callBack) => {
if (!value) {
callBack('请输入手机号码')
} else if (/^[1][0-9]{10}$/.test(value)) {
callBack()
} else {
callBack('请输入正确的手机号码')
}
}
}
]
},
......
}),
created() {
this.validator = new ValidatorUtils({
rules: this.rules,
data: this.formData })
this.formData = this.validator.Data
},
Vant async-validator 表单校验的更多相关文章
- 【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件
Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用 一.json数据结构 1.什么是json JSON(J ...
- easyui 进阶之表单校验、自定义校验
前言 easyui是一种基于jQuery的用户界面插件集合,它为创建现代化,互动,JavaScript应用程序,提供必要的功能,完美支持HTML5网页的完整框架,节省网页开发的时间和规模.非常的简单易 ...
- 2.12 学习总结 之 表单校验插件validate
一.说在前面 昨天 学习了ajax的相关知识 今天 学习表单校验插件validate, 并使用ajax 自定义校验规则 二.validate 插件 1.网络上有许多成熟的插件共使用者参考,插件就是将j ...
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- jQuery.validate表单校验+bootstrap
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- vue.js基础知识篇(7):表单校验详解
目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...
- Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
- 【转】vue.js表单校验详解
官方文档:https://monterail.github.io/vuelidate/ https://github.com/monterail/vuelidate 1.npm安装vue-valida ...
- day32(表单校验js和jquery表单校验)
校验用户名.密码.密码一直性. <style> .error { color: red } .success { color: green } </style> <scr ...
随机推荐
- FAQ | 是什么导致MySQL数据库服务器磁盘I/O高(本文章来自知数堂)
FAQ | 是什么导致MySQL数据库服务器磁盘I/O高 2016-12-26 叶金荣 老叶茶馆 0.导读 有个MySQL服务器的磁盘I/O总有过高报警,怎么回事? 本文约1500字,阅读时间约10分 ...
- 关于Simplicity Studio使用math.h编译出错
原因是未调用C标准库. 解决方法: 1.点项目右键——>properties——>C/C++Build——>Settings——>GNU ARM C Linker——>L ...
- 线段树的lazy(poj3468)
A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 73163 ...
- Python 类的设计原则
# 面向对象遵循的原则: SOLID # S(Single Responsibility Principle) # 单一职责原则 # 一个类只负责一项职责 # 好处 # 易于维护, 写出高内聚的代码 ...
- fabric安装使用
可以使用pip安装fabric,注意使用pip 安装fabric时,一定要指定版本,不要安装2.0版本的,无论怎样都会提示没有api这样模块,所以指定安装 pip install fabric==1. ...
- Axis2创建WebService实例
一.Axis2的下载和安装 1.可从http://ws.apache.org/axis2/ 下载Axis2的最新版本: 可以下载如下两个zip包: axis2-1.5.4-bi ...
- Autofac Getting Started(默认的构造函数注入)
https://autofaccn.readthedocs.io/en/latest/getting-started/index.html The basic pattern for integrat ...
- HBase 协处理器编程详解,第二部分:客户端代码编写
实现 Client 端代码 HBase 提供了客户端 Java 包 org.apache.hadoop.hbase.client.coprocessor.它提供以下三种方法来调用协处理器提供的服务: ...
- windchill系统——开发_角色管理——增加角色
步骤如下 ResourceBuild wt.project.RoleRB ant -f codebase/MakeJar.xml 这样就完成了,接下来看看结果
- MySQL 触发器简单实例 - 转载
MySQL 触发器简单实例 触发器:可以更新,删除,插入触发器,不同种类的触发器可以存在于同一个表,但同种类的不能有多个.一个更新.一个删除是可以共存的. ~~语法~~ CREATE TRIGGER ...