一般我們用vue的時候舷胜，有很多好用的插件，我們npm安裝一下就可以用了秩伞，但是像表單驗(yàn)證這種的很難找到自己心儀的插件逞带，和自己的網(wǎng)站交互也不一樣，還需要修改一下纱新，而且文件很大展氓，不如自己手寫一個了，只要自己需要的功能脸爱，可能寫的不好遇汞，提出意見

在我們開始寫插件之前要好好看看vue官方文檔，了解下面幾個API
1簿废、 Vue.directive( id, [definition] )
參數(shù)：

{string} id
{Function | Object} [definition]
用法：

注冊或獲取全局指令空入。

image.png

image.png

image.png

image.png

2、好好看看文檔的這里 ---->插件
下面我們開始寫一個驗(yàn)證的插件

validator.js 定義插件

/**
 * 默認(rèn)規(guī)則：
 * 1族檬、不為空
 * 2歪赢、電話號碼校驗(yàn)
 * 3、郵箱校驗(yàn)
 */
// 默認(rèn)規(guī)則正則表
let regList = {
  required: true,
  Mobile: /^1[3|4|5|7|8]\d{9}$/,
  Mail: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
}
// 默認(rèn)規(guī)則錯誤信息
let msgList = {
  required: '必填',
  Mobile: '請輸入正確的手機(jī)號',
  Mail: '請輸入正確的郵箱'
}
// 規(guī)則構(gòu)造器
function Rule (ruleName, ruleValue, ruleMsg) {
  this.ruleName = ruleName
  this.ruleValue = ruleValue
  this.msg = ruleMsg
}
// 掛在vue實(shí)例上面$va
function createVa (vm, domSelector) {
  let va = {
    ruleListRank: [],
    forms: {},
    checkRule: checkRule,
    checkAll: checkAll
  }
  if (vm.$va) {
    return vm.$va
  } else {
    vm.$va = va
    return vm.$va
  }
}
// va構(gòu)造器掛在vue實(shí)例上面$va的forms上面
function VaForm (el, finalRule) {
  this.dom = el
  this.rules = finalRule
}
// 斷言函數(shù)
function assert (condition, message) {
  if (!condition) {
    console.error('[validator-warn]:' + message)
  }
}
// 掛載va上的方法================================================>
// 校驗(yàn)表單的全部字段
function checkAll () {
  let ruleListRank = this.ruleListRank
  let forms = this.forms
  let checkRule = this.checkRule
  let checkFlag = true
  for (let name of ruleListRank) {
    let dom = forms[name].dom
    let rules = forms[name].rules
    let flag = checkRule(dom, rules)
    if (flag === false) {
      checkFlag = flag
    }
  }
  return checkFlag
}
// 校驗(yàn)表單的一個字段的第一個報錯信息
function checkRule (dom, rules) {
  let ruleCheckers = {
    required: checkEmpty,
    reg: checkReg
  }
  for (let rule of rules) {
    let {ruleName, ruleValue, msg} = rule
    let checkResult
    if (typeof ruleValue === 'function') {
      checkResult = ruleValue()
    } else {
      checkResult = ruleCheckers[ruleName]
        ? ruleCheckers[ruleName](ruleValue, dom)
        : ruleCheckers.reg(ruleValue, dom)
    }

    if (!checkResult) {
      setError(dom, msg, 'add')
      return false
    }
  }
  setError(dom, '', 'remove')
  return true
}
// 表單驗(yàn)證的方法================================================>
// 檢測非空
function checkEmpty (ruleValue, vaForm, va) {
  return vaForm.value.trim() !== ''
}
// 檢測正則
function checkReg (ruleValue, vaForm, va) {
  return ruleValue.test(vaForm.value)
}
/**
 * 設(shè)置錯誤的方法
 * @param {*} dom 當(dāng)前dom元素
 * @param {*} msg 報錯信息
 * @param {*} type 是添加報錯信息還是移除
 */
function setError (dom, msg, type) {
  if (dom.parentNode.classList) {
    if (type === 'add') {
      dom.parentNode.classList.add('error_item')
    } else {
      dom.parentNode.classList.remove('error_item')
    }
  }
  dom.nextElementSibling.innerHTML = msg
}
let installed = false
function plugin (Vue, options) {
  if (installed) {
    assert(installed, 'already installed')
    return
  }
  Vue.directive('validator', {
    bind: function (el, binding, vnode) {
      let vm = vnode.context // 基本的校驗(yàn)規(guī)則
      let finalRule = [] // 最終的校驗(yàn)規(guī)則
      let domSelector = binding.arg === undefined ? el.getAttribute('id') : binding.arg
      let options = binding.value ? binding.value : []// 特殊配置（允許非空单料，編輯新增共用等）
      assert(domSelector, 'not set id or binding.arg')
      let va = createVa(vm, domSelector)// 單例模式創(chuàng)建va埋凯，綁定在vm上
      va.ruleListRank.push(domSelector)// 表單檢驗(yàn)的順序
      for (let option of options) {
        if (typeof option === 'object') {
          // 用戶自定義的校驗(yàn)規(guī)則
          let ruleName = Object.keys(option)[0]
          let ruleValue = option[ruleName] ? option[ruleName] : regList[ruleName]
          assert(ruleValue, domSelector + " selector's " + ruleName + ' not set verification mode')
          finalRule.push(new Rule(ruleName, ruleValue, option.msg))
        } else {
          // 配置項(xiàng)定義的校驗(yàn)規(guī)則
          if (regList[option]) {
            finalRule.push(new Rule(option, regList[option], msgList[option]))
          }
        }
      }
      let vaForm = new VaForm(el, finalRule)
      va.forms[domSelector] = vaForm
    }
  })
  installed = true
}
// 自動注冊vue
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(plugin)
}
export default {
  install: plugin
}

API文檔

vue template結(jié)構(gòu)外層嵌套input_item里面有一個class為error的p標(biāo)簽

    <div class="input_item">
       <label for="password">{{$t('login.password.name')}}</label>
       <input class="error-content" type="password" id="password" v-model="password" :placeholder="$t('login.password.name')" autocomplete="off" tag="密碼" v-validator:password= "validatePassword" >
       <p class="error"></p>
   </div>

/**
 * @param {*} type   reg(正則), required(必填)，Mobile(電話)扫尖，Mail(郵件)白对，type 
    填寫其他的話默認(rèn)按照正則
 * @param {*} typeVal 根據(jù)不同type設(shè)置不同的值，正則表達(dá)式换怖，type類型為 
    Mobile甩恼、required、Mail 的可以寫true，false 条摸，還有function
 * @param {*} errMsg 自定義的報錯信息
 * 設(shè)置了三種規(guī)則:
 * 1.選項(xiàng)規(guī)則： 通過Vue指令的修飾符添加的規(guī)則悦污。v-validator:email= "[ 
    'required', 'Mail','Mobile']" 就可以校驗(yàn)?zāi)J(rèn)有的規(guī)則彈出默認(rèn)的錯誤提示信息。 
    例如你不想要默認(rèn)的錯誤提示信息屈溉。用自己寫的
    v-validator:email= "[{required: '', msg: '不可以為空呦'}]"
 * 2.自定義規(guī)則： Vue指令屬性值上添加的規(guī)則塞关。有兩種
       (1)正則
      v-validator:email= "[ 
      'required', 'Mail','Mobile']"
      (2)function
      [{limit: () =>{
        return true/false
       }, msg: this.$i18n.t('login.password.errorMsg.limit')}]
       如果你是放在data中設(shè)置規(guī)則的話
export default {
  name: 'login',
  data () {
    return {
      validatePassword: [
        {limit: this.limit, msg: this.$i18n.t('login.password.errorMsg.limit')}//$i18n是 
         為了語言切換
      ]
    }
  },
  methods: {
    limit: function () {
      let password = this.$data.password
      return (password.length >= 6 && password.length <= 12)
    }
  }
   3.還沒加這個功能 同一個type的規(guī)則只存在一個，也就是說子巾，如果type為reg(正則),那么會互相 
      蓋帆赢。 覆蓋的優(yōu)先級： 自定義規(guī)則 > 選項(xiàng)規(guī)則 > 默認(rèn)規(guī)則
 */

實(shí)戰(zhàn)使用
main.js

import Validator from './plugins/validator'
Vue.use(Validator)

main.vue

<template>
  <div class="login-main">
      <div class="login-form">
        <div class="login-content">
            <div class="input_item">
                <label for="email">{{$t('login.email.name')}}{{$t('login.email.errorMsg.required')}}</label>
                <input class="error-content" type="text" id="email"  v-model="email" :placeholder="$t('login.email.placeholder')" autocomplete="off" v-validator:email= "validateEmail" tag="郵箱">
                <span class="error"></span>
            </div>
            <div class="input_item">
                <label for="password">{{$t('login.password.name')}}</label>
                <input class="error-content" type="password" id="password" v-model="password" :placeholder="$t('login.password.name')" autocomplete="off" tag="密碼" v-validator:password= "validatePassword" >
                <p class="error"></p>
            </div>
            <div class="login-options">
              <input type="submit" class="cannot-login-btn" :value="$t('login.forget.name')" >
            </div>
            <input type="submit" class="login-btn" :value="$t('login.loginBtn.name')"  @click="checkLogin();">
        </div>
          <div class="change-btn">
              {{$t('login.changedes')}}
              <a href="/signup"> {{$t('login.signInBtn.name')}}</a>
          </div>
      </div>
  </div>
</template>
<script>
export default {
  name: 'login',
  data () {
    return {
      email: '',
      validateEmail: [
        {required: '', msg: this.$i18n.t('login.email.errorMsg.required')},
        {Mail: '', msg: this.$i18n.t('login.email.errorMsg.mail')}
      ],
      password: '',
      validatePassword: [
        {required: '', msg: this.$i18n.t('login.password.errorMsg.required')},
        {limit: this.limit, msg: this.$i18n.t('login.password.errorMsg.limit')}
      ]
    }
  },
  methods: {
    checkLogin: function () {
      let _this = this
      let checkResult = _this.$va.checkAll()
      if (checkResult) {
        console.log('請求接口去登陸')
      }
    },
    limit: function () {
      let password = this.$data.password
      return (password.length >= 6 && password.length <= 12)
    }
  }
}
</script>
<style lang="less" scoped>
.login-main{
  min-height: 100vh;
  background: #000000;
  // background: url('../../../static/img/login/login1.png')no-repeat;
  background-size: cover;
  overflow: hidden;
  .login-form{
    width: 432px;
    margin: 150px auto;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(26,26,26,.1);
    .login-content{
      padding: 62px 42px 68px;
    }
    .input_item{
      margin: 0 0 20px;
      label{
        font-size: 16px;
        display: block;
        color: #2d2d2d;
        margin-bottom: 5px
      }
      input{
        font-size: 16px;
        border: none;
        line-height: 32px;
        width: 100%;
        border-bottom: 1px solid #ebebeb;
      }
      input::-webkit-input-placeholder{
        color: #DFE2EC;
      }
      input::-moz-placeholder{  //不知道為何火狐的placeholder的顏色是粉紅色，怎么改都不行线梗，希望有大牛路過幫忙指點(diǎn)
        color: #DFE2EC;
      }
      input::-ms-input-placeholder{  //由于我的IE剛好是IE9椰于，支持不了placeholder，所以也測試不了(⊙﹏⊙)仪搔，有IE10以上的娃可以幫我試試
        color: #DFE2EC;
      }
//沒報錯的樣式
      .error{
        display: none
      }
//沒報錯的樣式
    }
//報錯的樣式
    .input_item.error_item{
    .error{
        display: block;
        color: red;
        font-size: 16px;
        line-height: 32px;
    }
    .error-content{
          border-bottom: 1px solid red;
    }
    }
//樣式
    .login-btn{
          margin-top: 30px;
          border: none;
          background: rgba(0,166,248,0.9);
          width: 100%;
          color: #fff;
          padding: 10px 0;
          border-radius: 3px;
          font-size: 16px;
    }
    .change-btn{
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        width: 100%;
        background-color: #f6f6f6;
        height: 58px;
        border-top: 1px solid #ebebeb;
        font-size: 16px;
        border-radius: 0 0 2px 2px;
        a{
          color:rgba(0, 166, 248, 1)
        }
    }
    .login-options{
      .cannot-login-btn{
          float: right;
          border: none;
          font-size: 14px;
          color: #BEBCBA;
          text-align: center;
          cursor: pointer;
          background: none;
      }
    }
  }
}
</style>

最終的效果

image.png