[js]vee-validate自定义告警信息和自定义规则

最新推荐文章于 2024-03-01 17:07:12 发布

jameskaron

最新推荐文章于 2024-03-01 17:07:12 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： # vue 文章标签： veeValidate

本文链接：https://blog.youkuaiyun.com/jameskaron/article/details/108399581

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在vee-validate中自定义验证规则和实现国际化。通过在组件引用和Vue的computed属性中定义规则，特别是处理不需Promise回调的情况。同时，展示了如何进行国际化设置，修改特定验证关键字的错误消息，以及使用resolve处理验证结果。在 Laravel 项目中，需要注意缓存问题可能影响JS更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://vee-validate.logaretm.com/v2/guide/rules.html#date-format-params

本身框架自带很多验证,但是如果想自定义规则或者国际化,就需要一些自定义操作

1. 在页面的组件引用:

2. 在vue的computed里添加规则:

注意,有些规则不需要写promise回调,有些不写的话会报错:

Cannot read property 'then' of undefined

换成上面promise的写法即可

例如decimal这类正则验证可以不写:

https://stackoverflow.com/questions/59156440/how-to-validate-decimal-value-in-vee-validate-3-0-version

this.$validator.extend("decimal", {
                validate: (value, { decimals = '*', separator = '.' } = {}) => {
                    if (value === null || value === undefined || value === '') {
                        return {
                            valid: false
                        };
                    }
                    if (Number(decimals) === 0) {
                        return {
                            valid: /^-?\d*$/.test(value),
                        };
                    }
                    const regexPart = decimals === '*' ? '+' : `{1,${decimals}}`;
                    const regex = new RegExp(`^[-+]?\\d*(\\${separator}\\d${regexPart})?([eE]{1}[-]?\\d+)?$`);

                    return {
                        valid: regex.test(value),
                    };
                },
            });

2. 国际化

实际对应的是

this.$validator.extend("decimal", {

decimal 关键字

现在页面引入

<script src="{{ asset('js/components/error_msg.js') ."?". config('cache.asset_postfix') }}"></script>

这是laravel的写法,需要留意的是,有时候会被打包产生缓存,更新不了js,这时候需要把 ."?". config('cache.asset_postfix')去掉

error_msg.js:

不是所有国际化都需要在Vue的类里面定义,如果本身框架自带的,只是想改变msg,就只需要在error_msg.js里面定义

加上配置:

注意对应名称

补充:

控制验证

resolve来返回结果

例子:

//用promise封装ajax请求
    function ajaxPromise(type,_url){
        return new Promise(function(resolve,reject){// Promis实例化
            var xhr = new XMLHttpRequest();
            xhr.open(type,_url);
            xhr.send();
            xhr.addEventListener("readystatechange",function(){
                if(xhr.readyState !=4 ){// 监听状态不对的时候 不指定函数
                    return;
                }
                if(xhr.readyState==4&&xhr.status==200){
                    var res = JSON.parse(xhr.responseText);
                    console.log("ajaxPromise",res)
                    resolve(res); // 回调成功返回
                }else{
                    reject();// 回调失败返回
                }
            })
        })
    }