扩展element ui的表单校验，并扩展为Vue插件

最新推荐文章于 2024-08-12 08:39:19 发布

黄腾武

最新推荐文章于 2024-08-12 08:39:19 发布

阅读量2.9k

点赞数 1

分类专栏：前端vue 文章标签： vue element ui 表单校验手机校验

本文链接：https://blog.csdn.net/smartt/article/details/78967831

版权

前端vue 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

其它不说，直接上代码，直接用常用的手机校验，ele目前对手机号校验是缺失的，需要自己去扩展正则。

const Validator = {
  /*手机号字符串校验，返回true/false*/
  isPhone(str) {
    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
    return reg.test(str)
  },
  /*获取elem手机规则校验器*/
  getPhoneValidator(){
    var validPhone=(rule, value,callback)=>{
        if (!value){
            callback(new Error('请输入手机号码'))
        }else  if (!Validator.isPhone(value)){
          callback(new Error('请输入正确的11位手机号码'))
        }else {
            callback()
        }
    }
    return validPhone
  }
}

// 对Validator的实例重新封装成一个plugin ,方便 Vue.use(xxxx)
export default {
  install: function(Vue, Option) {
    Object.defineProperty(Vue.prototype, "$valid", { value: Validator });
  }
};

main.js直接引用注入到Vue

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'

import router from './server/router'
import axiosPlugin from "./server/axios-plugin"
import validatorPlugin from "./server/validator-plugin"

Vue.use(ElementUI)
Vue.use(axiosPlugin)
Vue.use(validatorPlugin)

如何使用？

/*表单验证*/
                formRules:{
                  name :[{ required: true, message:'请输入姓名',trigger:'blur'},{min: 2,max: 5, message:'长度在2到10个字',trigger:'blur'}],
                  email :[{ required: true, message:'请输入邮箱',trigger:'blur'},{type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}],
                  phone :[{ required: true, validator : this.$valid.getPhoneValidator() ,trigger:'blur'}], //自定义校验器
                }