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属性:制定表单数据在发送到服 ...
随机推荐
- PDF的信息提取的问题
PDF对企业应用来说是刚需. 然而PDF显然不是一种对机器友好的格式,它只是对人类友好,就是说方便阅读打印,但让程序去提取其中的内容却很难.下面简单说说为什么是这样. 以前还读书的时候(20+ ...
- linux(CentOS7) 之 jdk1.8 下载及安装
下载 一.百度搜索oracle,进入官网(或直接进入官网https://www.oracle.com) 二.选择 products 下的 java 三.选择Download Java 四.往下翻找到J ...
- 初识python 之 爬虫:爬取某网站的壁纸图片
用到的主要知识点:requests.get 获取网页HTMLetree.HTML 使用lxml解析器解析网页xpath 使用xpath获取网页标签信息.图片地址request.urlretrieve ...
- frp + nginx 配置多人共用的http 内网穿透服务
来源:简书 https://www.jianshu.com/p/c9d7527d607b 一. 前言 frp 是一个用Go语言开发的,可用于内网穿透的高性能的反向代理应用,支持 tcp, udp ...
- js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏
/** * 页面滑动滚动事件 * @param e *///0为隐藏,1为显示var s = 1;function scrollFunc(e) { // e存在就用e不存在就用windon.event ...
- spring boot + mybatis + mybatis逆向工程 --- 心得
1.前言 以前用惯了springMVC框架 ,以SSM 框架 来开发项目 ,现在因为需要,使用spring boot框架,那么mybatis该如何与spring boot结合呢? 结构区别不大,但是 ...
- Vue养成之路
目录 Vue系列教程(一)之初识Vue Vue系列教程(二)之Vue进阶 Vue系列继承(三)之Vue-cli脚手架的使用 ... 更新中 基础入门 Vue基础(一)之es6 Vue基础(二)之箭头函 ...
- vue 自动生成菜单
import constant from './const' export function getRouters (files) { let filenames = files.keys() let ...
- javaScript(笔记1)
一.JavaScript数据类型: 1.分类: 基本数据类型 & 高级引用数据类型 2.基本数据类型: 数字类型(number), 字符串类型(string), 布尔类型(boolean) 3 ...
- 反射获取到class文件中的实例变量
获取类的class 属性的三种方式 1.对象获取: 调用person类的父类方法getClaass(); Person p = new Person(); Class c = p.getClaass( ...