4.2. 注册表单验证

2.5

3.0 2.6 2.5

V01 Vue.js 实战教程 - 基础篇 /

本教程最新版为 2.6，当前版本已放弃维护，请阅读最新版本！

简介

本小节中，我们将新建一个自定义指令，来验证表单项是否有效，同时新建一个工具函数，来生成验证码。

添加表单验证指令

1). 导出验证指令对象

在 src/directives 下新建 validator.js 文件，复制贴入以下代码：

src/directives/validator.js

function validate(el, modifiers, bindingValue) {
  bindingValue = bindingValue && typeof bindingValue === 'object' ? bindingValue : {}
  const value = typeof el.value === 'string' ? el.value.trim() : ''
  const { title = '该项', error } = bindingValue
  let defaultError = ''

  if (modifiers.required && value === '') {
    defaultError = `${title}不能为空`
  } else if (bindingValue.target) {
    const target = document.querySelector(bindingValue.target)
    const targetValue = target ? target.value : null

    if (targetValue !== value) {
      defaultError = `输入的${title}不匹配`
    }
  } else if (bindingValue.regex) {
    try {...

本文章首发在 LearnKu.com 网站上。

为了保证课程的高品质，我们需要对课程进行收费。付费后才能观看剩余内容。购买

4.2. 注册表单验证

2.5

3.0 2.6 2.5

简介

添加表单验证指令

1). 导出验证指令对象

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

4.2. 注册表单验证 2.5 3.0 2.6 2.5

简介

添加表单验证指令

1). 导出验证指令对象

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录

4.2. 注册表单验证

2.5

3.0 2.6 2.5