Vue小白练级之路---001表单验证功能的一般实现思路
思路:
- 先各自验证
- 非空校验
- 具体规则校验
- 后兜底校验( 防止用户没输入信息直接登录 )
实现:( 以 element-ui 为例 )
- 在 标签上用 model 动态绑定收集数据的对象(form)
- 在 标签上用 rules 动态绑定验证规则对象(formRule)
- 给 form 里的每一项需要验证的 绑定 prop 属性 , 值为验证规则 formRule 里的每一项
- 兜底校验(里面也可以写一些自定义校验规则)
示例:(自定义数据名与 element-ui 不一致)
两次密码不一致的提示:
实现步骤:
- 在data函数之中,return 对象之前定义校验函数 checkPwd,
- 在第二次密码校验的规则对象中 添加额外的规则对象
{ validator 属性: 值为校验的函数名,
triggle 触发方式: 值也为blur }
data () {
const checkPwd = (rules, value, cb) => {
// 两次密码不一致的校验配置
// checkPwd就是validator属性的校验规则
// 三个参数:
// value: 收集的要校验的这一项的值,
// cb: 处理函数 cb():成功就执行该函数。
if (value === this.regForm.password) {
cb()
} else {
cb(new Error('两次密码不一致!'))
}
}
return {
regForm: {
username: '',
password: '',
repassword: ''
},
regFormRules: {
username: [
{ required: true, message: '用户名为必填项!', triggle: 'blur' },
{ pattern: /[1]{1,10}$/, message: '用户名需为1-10位的字母数字组合', triggle: 'blur' }
],
password: [
{ required: true, message: '密码为必填项!', triggle: 'blur' },
{ pattern: /^\S{6,15}$/, message: '密码需为6-15位的非空字符串', triggle: 'blur' }
],
repassword: [
{ required: true, message: '确认密码为必填项!', triggle: 'blur' },
{ pattern: /^\S{6,15}$/, message: '密码需为6-15位的非空字符串', triggle: 'blur' },
{ validator: checkPwd, triggle: 'blur' }
]
}
}
a-zA-Z0-9 ︎
Vue小白练级之路---001表单验证功能的一般实现思路的更多相关文章
- HTML5新增的表单验证功能
一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...
- (译) 在AngularJS中使用的表单验证功能【转】
验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...
- (译) 在AngularJS中使用的表单验证功能
验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...
- 如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
- 让Angular自定义组件支持form表单验证
Angular提供了一套非常强大的表单验证库(vue和react都需要第三方库的支持),可以非常方便简单实现web应用程序中的表单验证功能.但是如何让我们自定义的组件也支持验证呢? 我遇到一个需求是封 ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- avalon的表单验证
表单验证 avalon内置了强大的表单验证功能,它需要结合ms-duplex, ms-validate, ms-rules这个三个指令一起使用. ms-duplex负责监控每个表单元素的输入. ms- ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- HTML5 Web Form 新增属性和表单验证
<form>标签的基本属性 method属性:指定浏览器向服务器传送数据的方式,可选: action属性:设置服务器接受和处理表单数据的URL: enctype属性:制定表单数据在发送到服 ...
随机推荐
- LDAP理解要点
1.介绍 LDAP(Lightweight Directory Access Protocol)是"轻量级目录访问协议", 是一个用于访问"目录服务器"(Dir ...
- 如何修改文件的 “创建时间” 和 “修改时间”(Windows Linux macOS)
请访问原文链接:https://sysin.org/blog/how-to-change-file-date,查看最新版.原创作品,转载请保留出处. 作者:gc(at)sysin.org,主页:www ...
- 第10组 Beta冲刺 (2/5)
1.1基本情况 ·队名:今晚不睡觉 ·组长博客:https://www.cnblogs.com/cpandbb/p/14015412.html ·作业博客:https://edu.cnblogs.co ...
- 遍历hashmap的6种方法
1. 通过ForEach循环进行遍历 mport java.io.IOException; import java.util.HashMap; import java.util.Map; public ...
- react 网址导航
项目搭建 使用webpack.babel.react.antdesign配置单页面应用开发环境
- nuxt中iview按需加载配置
在plugins/iview.js中修改 初始代码如下 import Vue from 'vue' import iView from 'iview' import locale from 'ivie ...
- vue-cli 在IE下兼容设置
最近我们的项目选择用vue来做开发,在这个过程IE兼容性 首先我们按照步骤来安装vue-cli 创建项目运行 npm install npm run dev 然后我们在ie9下打开发现没有用但是vue ...
- 经典变长指令-ModRM
一.如何计算ModRM 0X88 MOV Eb,Gb G:通用寄存器 0X89 MOV Ev,Gv E:寄存器/内存 0X8A MOV Gb,Eb b:字节 0X8B MOV Gv,Ev v:Word ...
- 联盛德 HLK-W806 (十三): 运行FatFs读写FAT和exFat格式的SD卡/TF卡
目录 联盛德 HLK-W806 (一): Ubuntu20.04下的开发环境配置, 编译和烧录说明 联盛德 HLK-W806 (二): Win10下的开发环境配置, 编译和烧录说明 联盛德 HLK-W ...
- 《剑指offer》面试题25. 合并两个排序的链表
问题描述 输入两个递增排序的链表,合并这两个链表并使新链表中的节点仍然是递增排序的. 示例1: 输入:1->2->4, 1->3->4 输出:1->1->2-> ...