Vue——AsyncValidator汉化

最近在重写element-ui的表单控件（<el-form>），AsyncValidator是表单控件内置的验证工具。

AsyncValidator基本用法：

           /**
             * 使用AsyncValidator进行数据校验
             * @param rules 验证规则
             * @param value 需要验证的值
             * @returns {boolean} 返回验证结果
             */
            checkValidityWithAsyncValidator: function (rules, value) {
                const descriptor = {};
                //this.label指的是字段名称
                descriptor[this.label] = rules;

                const validator = new AsyncValidator(descriptor);
                const model = {};
                model[this.label] = value;

                let res = true;
                validator.validate(model, {firstFields: true}, (errors, invalidFields) => {
                    res = !errors;
                    //错误提示
                    this.message = errors ? errors[0].message : '';
                });
                return res;
            }

AsyncValidator验证规则的基本写法如下：

rules: [{min: 3, max: 5, type: 'string'}]

rules其实可以不包含message字段的，AsyncValidator已经有默认的错误提示，观察AsyncValidator源码，

根目录中的messages.js就是错误提示包，不过提示是英文版本的，复制出来，进行汉化。

在需要调用AsyncValidator的地方，导入汉化之后的message。

AsyncValidator配置中，加入汉化之后的语言包，修改上面的代码，最终如下：

           /**
             * 使用AsyncValidator进行数据校验
             * @param rules 验证规则
             * @param value 需要验证的值
             * @returns {boolean} 返回验证结果
             */
            checkValidityWithAsyncValidator: function (rules, value) {
                const descriptor = {};
                descriptor[this.label] = rules;

                const validator = new AsyncValidator(descriptor);
                const model = {};
                model[this.label] = value;

                let res = true;
                //导入汉化之后的错误提示包
                validator.messages(messages);
                validator.validate(model, {firstFields: true}, (errors, invalidFields) => {
                    res = !errors;
                    this.message = errors ? errors[0].message : '';
                });
                return res;
            }

页面效果如下