Vue 一个简单的表单验证指令

第一步：

　　写一个全局的插件  globle.js  并添加个Vue指令  v-validate  , 并在其中定义验证规则，如下，添加了输入字数限制和仅支持输入数字校验

function install(Vue, options) {
  // v-max
  Vue.directive('validate', function (el, arg) {
    const validate = {
      init: function (params) {
        params.maxlength && this.maxlength(params.maxlength)
        params.number && this.onlyNumber()
      },
      maxlength: function (max) {
        el.addEventListener('input', function () {
          el.value.length > max && (el.value = el.value.slice(0, max))
        })
      },
      onlyNumber: function () {
        let func = function () {
          el.value = el.value.replace(/[^\d]/g,'')
        }
        el.addEventListener('keydown', func)
        el.addEventListener('blur', func)
        el.addEventListener('change', func)
        el.addEventListener('input', func)
      },

    }
    validate.init(arg.value)
  })
}

export default install

第二步：

       mian.js 中引入并  use 

import Vue from 'vue'
import App from './App.vue'
import Globle from './plugin/globle'
Vue.config.productionTip = false
Vue.use(Globle)
new Vue({
  render: h => h(App),
}).$mount('#app')

第三步：

　　在页面中使用，可以看出校验规则是在  v-validate  指令的参数中传入的，需要用到什么指令就添加对应的参数

<input type="text" v-validate="{maxlength: 11}" placeholder="限制成11位"/>
<input type="text" v-validate="{number: true}" placeholder="限制成纯数字">
<input type="text" v-validate="{number: true, maxlength: 11}" placeholder="限制成11位的纯数字">

 

以上！