思路

  1. 先各自验证

    • 非空校验
    • 具体规则校验
  2. 后兜底校验( 防止用户没输入信息直接登录 )

实现:( 以 element-ui 为例 )

  1. 在 标签上用 model 动态绑定收集数据的对象(form)
  2. 在 标签上用 rules 动态绑定验证规则对象(formRule)
  3. 给 form 里的每一项需要验证的 绑定 prop 属性 , 值为验证规则 formRule 里的每一项
  4. 兜底校验(里面也可以写一些自定义校验规则)

示例:(自定义数据名与 element-ui 不一致)







两次密码不一致的提示

实现步骤:

  1. 在data函数之中,return 对象之前定义校验函数 checkPwd,
  2. 在第二次密码校验的规则对象中 添加额外的规则对象

    { 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' }

    ]

    }

    }

  1. a-zA-Z0-9

Vue小白练级之路---001表单验证功能的一般实现思路的更多相关文章

  1. HTML5新增的表单验证功能

    一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...

  2. (译) 在AngularJS中使用的表单验证功能【转】

    验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...

  3. (译) 在AngularJS中使用的表单验证功能

    验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...

  4. 如何优雅的使用 Angular 表单验证

    随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...

  5. 让Angular自定义组件支持form表单验证

    Angular提供了一套非常强大的表单验证库(vue和react都需要第三方库的支持),可以非常方便简单实现web应用程序中的表单验证功能.但是如何让我们自定义的组件也支持验证呢? 我遇到一个需求是封 ...

  6. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  7. avalon的表单验证

    表单验证 avalon内置了强大的表单验证功能,它需要结合ms-duplex, ms-validate, ms-rules这个三个指令一起使用. ms-duplex负责监控每个表单元素的输入. ms- ...

  8. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  9. HTML5 Web Form 新增属性和表单验证

    <form>标签的基本属性 method属性:指定浏览器向服务器传送数据的方式,可选: action属性:设置服务器接受和处理表单数据的URL: enctype属性:制定表单数据在发送到服 ...

随机推荐

  1. PDF的信息提取的问题

    PDF对企业应用来说是刚需.   然而PDF显然不是一种对机器友好的格式,它只是对人类友好,就是说方便阅读打印,但让程序去提取其中的内容却很难.下面简单说说为什么是这样.   以前还读书的时候(20+ ...

  2. linux(CentOS7) 之 jdk1.8 下载及安装

    下载 一.百度搜索oracle,进入官网(或直接进入官网https://www.oracle.com) 二.选择 products 下的 java 三.选择Download Java 四.往下翻找到J ...

  3. 初识python 之 爬虫:爬取某网站的壁纸图片

    用到的主要知识点:requests.get 获取网页HTMLetree.HTML 使用lxml解析器解析网页xpath 使用xpath获取网页标签信息.图片地址request.urlretrieve ...

  4. frp + nginx 配置多人共用的http 内网穿透服务

    来源:简书   https://www.jianshu.com/p/c9d7527d607b 一. 前言 frp 是一个用Go语言开发的,可用于内网穿透的高性能的反向代理应用,支持 tcp, udp ...

  5. js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏

    /** * 页面滑动滚动事件 * @param e *///0为隐藏,1为显示var s = 1;function scrollFunc(e) { // e存在就用e不存在就用windon.event ...

  6. spring boot + mybatis + mybatis逆向工程 --- 心得

    1.前言 以前用惯了springMVC框架 ,以SSM 框架 来开发项目  ,现在因为需要,使用spring boot框架,那么mybatis该如何与spring boot结合呢? 结构区别不大,但是 ...

  7. Vue养成之路

    目录 Vue系列教程(一)之初识Vue Vue系列教程(二)之Vue进阶 Vue系列继承(三)之Vue-cli脚手架的使用 ... 更新中 基础入门 Vue基础(一)之es6 Vue基础(二)之箭头函 ...

  8. vue 自动生成菜单

    import constant from './const' export function getRouters (files) { let filenames = files.keys() let ...

  9. javaScript(笔记1)

    一.JavaScript数据类型: 1.分类: 基本数据类型 & 高级引用数据类型 2.基本数据类型: 数字类型(number), 字符串类型(string), 布尔类型(boolean) 3 ...

  10. 反射获取到class文件中的实例变量

    获取类的class 属性的三种方式 1.对象获取: 调用person类的父类方法getClaass(); Person p = new Person(); Class c = p.getClaass( ...