注册全局指令（表单验证）

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 {
      if (!bindingValue.regex.test(value)) {
        defaultError = `${title}格式不正确`
      }
    } catch (e) {}
  }

  if (defaultError) {
    if (error === undefined) {
      showError(el, defaultError)
    } else {
      showError(el, error)
    }
  } else {
    showError(el)
  }
}

function showError(el, error) {
  const parentElement = el.parentElement
  const errorElement = getErrorElement(el)

  if (error === undefined) {
    errorElement.style.display = 'none'
    parentElement.classList.remove('has-error')
  } else {
    errorElement.textContent = error
    errorElement.style.display = 'block'
    parentElement.classList.add('has-error')
  }
}

function getErrorElement(el) {
  const parentElement = el.parentElement
  let errorElement = parentElement.querySelector('.help-block')

  if (!errorElement) {
    const tpl = `<span class="help-block"></span>`
    const fragment = document.createRange().createContextualFragment(tpl)

    parentElement.appendChild(fragment)
    errorElement = parentElement.querySelector('.help-block')
  }

  return errorElement
}
export default {
  bind(el, binding, vnode) {
    // 使用解构赋值声明 value = binding.value,  arg = binding.arg,  modifiers = binding.modifiers 
    const { value, arg, modifiers } = binding
    // 如果没传对应的事件名称参数，就默认使用 change 事件
    const eventType = ['change', 'blur', 'input'].indexOf(arg) !== -1 ? arg : 'change'
    // 默认处理器，当用户开始输入时，移除错误提示
    const defaultHandler = () => {
      showError(el)
    }
    // 验证处理器，当用户触发对应的事件时，验证用户输入的信息
    const handler = () => {
      validate(el, modifiers, value)
    }

    // 在 el 元素上的添加 input 事件监听
    el.addEventListener('input', defaultHandler, false)
    // 在 el 元素上的添加用户指定的事件监听
    el.addEventListener(eventType, handler, false)

    // 移除 el 元素上事件监听和数据绑定的方法
    el.destroy = () => {
      el.removeEventListener('input', defaultHandler, false)
      el.removeEventListener(eventType, handler, false)
      el.destroy = null
    }
  },
  inserted(el, binding, vnode) {//被绑定插入父节点的时候调用，保证了父节点的存在
    const { value, modifiers } = binding
    // 指定当前一系列验证项的父级，我们这里指定为含 data-validator-form 的元素
    const form = el.closest('[data-validator-form]')
    // 指定一个按钮来检查所有验证项，我们这里指定为含 type=submit 的元素
    const submitBtn = form ? form.querySelector('[type=submit]') : null

    if (submitBtn) {
      // 提交处理器
      const submitHandler = () => {
        // 验证所有项
        validate(el, modifiers, value)

        // 获取错误信息
        const errors = form.querySelectorAll('.has-error')

        if (!errors.length) {
          // 没有错误信息时，在按钮上添加一个 canSubmit 属性，并指定为 true
          submitBtn.canSubmit = true
        } else {
          // 有错误信息时，在按钮上添加一个 canSubmit 属性，并指定为 false
          submitBtn.canSubmit = false
        }
      }

      // 在按钮上的添加 click 事件监听
      submitBtn.addEventListener('click', submitHandler, false)

      // 移除按钮上事件监听和数据绑定的方法
      el.destroySubmitBtn = () => {
        submitBtn.removeEventListener('click', submitHandler, false)
        el.destroySubmitBtn = null
      }
    }
  },
  unbind(el) {
    // 移除事件监听和数据绑定
    el.destroy()
    if (el.destroySubmitBtn) el.destroySubmitBtn()
  }
}

2). 注册全局验证指令

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

src/directives/index.js

import Vue from 'vue'
import validator from './validator'

Vue.directive('validator', validator)

注册全局指令需要使用 Vue.directive，第一个参数 'validator' 是指令名称，第二个参数 validator 是指令对象或者指令函数，我们这里是指令对象。全局注册的好处是，可以在实例内部的所有组件中使用，而不用在每个组件内部单独引用和注册。

 

3). 引入全局验证指令

打开 src/main.js 文件，引入 ./directives：

src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import './directives'

4). 使用表单验证指令

打开 src/views/auth/Register.vue，查找 <div class="panel-body"> 元素，复制以下代码将其替换：

src/views/auth/Register.vue

<div class="panel-body" data-validator-form>
  <div class="form-group">
    <label class="control-label">用户名</label>
    <input v-validator:input.required="{ regex: /^[a-zA-Z]+\w*\s?\w*$/, error: '用户名要求以字母开头的单词字符' }" type="text" class="form-control" placeholder="请填写用户名">
  </div>
  <div class="form-group">
    <label class="control-label">密码</label>
    <input id="password" v-validator.required="{ regex: /^\w{6,16}$/, error: '密码要求 6 ~ 16 个单词字符' }" type="password" class="form-control" placeholder="请填写密码">
  </div>
  <div class="form-group">
    <label class="control-label">确认密码</label>
    <input v-validator.required="{ target: '#password' }" type="password" class="form-control" placeholder="请填写确认密码">
  </div>
  <div class="form-group">
    <label class="control-label">图片验证码</label>
    <input v-validator.required="{ title: '图片验证码' }" type="text" class="form-control" placeholder="请填写验证码">
  </div>
  <div class="thumbnail" title="点击图片重新获取验证码">
    <div class="captcha"></div>
  </div>
  <button type="submit" class="btn btn-lg btn-success btn-block">
    <i class="fa fa-btn fa-sign-in"></i> 注册
  </button>
</div>

我们先在外层元素上，添加 data-validator-form 属性，使其成为所有验证项的父级：

<div class="panel-body" data-validator-form>

自定义指令知识：

• binding.name：指令名，不包括 v- 前缀，这里是 'validator' ；
• binding.value：指令的绑定值，这里是 { regex: /^[a-zA-Z]+\w*\s?\w*$/, error: '用户名要求以字母开头的单词字符' } ；
• binding.arg：传给指令的参数，这里是 'input' ；
• binding.modifiers：一个包含修饰符的对象，这里是 { required: true } ；