Vue中的自定义参数校验

目录

1 前言

2 方法

2.1 定义校验函数

2.2 进行绑定

1 前言

在Vue中，自带了许多校验方法，但是有时候需要我们自定义一些校验方法，才能满足实际的需求。现在举个例子，我们从这个例子来讲解自定义参数校验。

我们要提供修改密码的功能，因此有如下数据：

const passwordData = ref({
    old_pwd: '',    //旧密码
    new_pwd: '',    //新密码
    re_pwd: ''       //确认密码
})

现在我们要为这三个参数提供校验，旧密码和新密码的长度和非空要求都可以通过自带的校验实现，但是要校验旧密码和新密码是否一致则需要自定义校验，具体操作如下。

2 方法

2.1 定义校验函数

模板如下：

//value是校验参数本身的值
//rule和callback同样是必须的
const 函数名 = function (rule, value, callback) {
    //xxx和yyy为提示信息
    //条件可以有很多个
    if (条件1) {
        callback(new Error('xxx'))
    } else if (条件2) {
        callback(new Error('yyy'))
    } else {
        //校验通过返回这个，其它均为校验不通过的情况
        callback()
    }
}

根据模板我们可以得到：

const checkRePassword = function (rule, value, callback) {
    if (value === '') {
        //保证非空
        callback(new Error('请再次确认密码'))
    } else if (value !== passwordData.value.new_pwd) {
        //保证一致
        callback(new Error('请确保两次输入的密码一样'))
    } else {
        callback()
    }
}

2.2 进行绑定

我们可以在rules中，可以通过validator:xxx，为参数绑定我们自定义的规则：

const rules = {
    //其它...
    re_pwd: [
        { validator: checkRePassword, trigger: 'blur' }
    ]
}