一般我们用vue的时候，有很多好用的插件，我们npm安装一下就可以用了，但是像表单验证这种的很难找到自己心仪的插件，和自己的网站交互也不一样，还需要修改一下，而且文件很大，不如自己手写一个了，只要自己需要的功能，可能写的不好，提出意见
在我们开始写插件之前要好好看看vue官方文档，了解下面几个API
1、 Vue.directive( id, [definition] )
参数：
{string} id
{Function | Object} [definition]
用法：
注册或获取全局指令。
image.png
image.png
image.png
image.png
2、好好看看文档的这里 ---->插件
下面我们开始写一个验证的插件
validator.js 定义插件
/**
* 默认规则：
* 1、不为空
* 2、电话号码校验
* 3、邮箱校验
*/
// 默认规则正则表
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})+$/
}
// 默认规则错误信息
let msgList = {
required: '必填',
Mobile: '请输入正确的手机号',
Mail: '请输入正确的邮箱'
}
// 规则构造器
function Rule (ruleName, ruleValue, ruleMsg) {
this.ruleName = ruleName
this.ruleValue = ruleValue
this.msg = ruleMsg
}
// 挂在vue实例上面$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构造器挂在vue实例上面$va的forms上面
function VaForm (el, finalRule) {
this.dom = el
this.rules = finalRule
}
// 断言函数
function assert (condition, message) {
if (!condition) {
console.error('[validator-warn]:' + message)
}
}
// 挂载va上的方法================================================>
// 校验表单的全部字段
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
}
// 校验表单的一个字段的第一个报错信息
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
}
// 表单验证的方法================================================>
// 检测非空
function checkEmpty (ruleValue, vaForm, va) {
return vaForm.value.trim() !== ''
}
// 检测正则
function checkReg (ruleValue, vaForm, va) {
return ruleValue.test(vaForm.value)
}
/**
* 设置错误的方法
* @param {*} dom 当前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 // 基本的校验规则
let finalRule = [] // 最终的校验规则
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)// 单例模式创建va，绑定在vm上
va.ruleListRank.push(domSelector)// 表单检验的顺序
for (let option of options) {
if (typeof option === 'object') {
// 用户自定义的校验规则
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 {
// 配置项定义的校验规则
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结构外层嵌套input_item里面有一个class为error的p标签
/**
* @param {*} type reg(正则), required(必填)，Mobile(电话)，Mail(邮件)，type
填写其他的话默认按照正则
* @param {*} typeVal 根据不同type设置不同的值，正则表达式，type类型为
Mobile、required、Mail 的可以写true，false ，还有function
* @param {*} errMsg 自定义的报错信息
* 设置了三种规则:
* 1.选项规则： 通过Vue指令的修饰符添加的规则。v-validator:email= "[
'required', 'Mail','Mobile']" 就可以校验默认有的规则弹出默认的错误提示信息。
例如你不想要默认的错误提示信息。用自己写的
v-validator:email= "[{required: '', msg: '不可以为空呦'}]"
* 2.自定义规则： Vue指令属性值上添加的规则。有两种
(1)正则
v-validator:email= "[
'required', 'Mail','Mobile']"
(2)function
[{limit: () =>{
return true/false
}, msg: this.$i18n.t('login.password.errorMsg.limit')}]
如果你是放在data中设置规则的话
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的规则只存在一个，也就是说，如果type为reg(正则),那么会互相
盖。 覆盖的优先级： 自定义规则 > 选项规则 > 默认规则
*/
实战使用
main.js
import Validator from './plugins/validator'
Vue.use(Validator)
main.vue
{{$t('login.changedes')}}
{{$t('login.signInBtn.name')}}
最终的效果
image.png