思路

  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. LDAP理解要点

    1.介绍 LDAP(Lightweight Directory Access Protocol)是"轻量级目录访问协议", 是一个用于访问"目录服务器"(Dir ...

  2. 如何修改文件的 “创建时间” 和 “修改时间”(Windows Linux macOS)

    请访问原文链接:https://sysin.org/blog/how-to-change-file-date,查看最新版.原创作品,转载请保留出处. 作者:gc(at)sysin.org,主页:www ...

  3. 第10组 Beta冲刺 (2/5)

    1.1基本情况 ·队名:今晚不睡觉 ·组长博客:https://www.cnblogs.com/cpandbb/p/14015412.html ·作业博客:https://edu.cnblogs.co ...

  4. 遍历hashmap的6种方法

    1. 通过ForEach循环进行遍历 mport java.io.IOException; import java.util.HashMap; import java.util.Map; public ...

  5. react 网址导航

    项目搭建 使用webpack.babel.react.antdesign配置单页面应用开发环境

  6. nuxt中iview按需加载配置

    在plugins/iview.js中修改 初始代码如下 import Vue from 'vue' import iView from 'iview' import locale from 'ivie ...

  7. vue-cli 在IE下兼容设置

    最近我们的项目选择用vue来做开发,在这个过程IE兼容性 首先我们按照步骤来安装vue-cli 创建项目运行 npm install npm run dev 然后我们在ie9下打开发现没有用但是vue ...

  8. 经典变长指令-ModRM

    一.如何计算ModRM 0X88 MOV Eb,Gb G:通用寄存器 0X89 MOV Ev,Gv E:寄存器/内存 0X8A MOV Gb,Eb b:字节 0X8B MOV Gv,Ev v:Word ...

  9. 联盛德 HLK-W806 (十三): 运行FatFs读写FAT和exFat格式的SD卡/TF卡

    目录 联盛德 HLK-W806 (一): Ubuntu20.04下的开发环境配置, 编译和烧录说明 联盛德 HLK-W806 (二): Win10下的开发环境配置, 编译和烧录说明 联盛德 HLK-W ...

  10. 《剑指offer》面试题25. 合并两个排序的链表

    问题描述 输入两个递增排序的链表,合并这两个链表并使新链表中的节点仍然是递增排序的. 示例1: 输入:1->2->4, 1->3->4 输出:1->1->2-> ...