diff --git a/src/field/index.js b/src/field/index.js index 42425f16a..a0736a95b 100644 --- a/src/field/index.js +++ b/src/field/index.js @@ -120,16 +120,6 @@ export default createComponent({ formValue() { return this.children ? this.children.value : this.value; }, - - formValueEmpty() { - const { formValue } = this; - - if (Array.isArray(formValue)) { - return !formValue.length; - } - - return !formValue; - }, }, methods: { @@ -147,9 +137,9 @@ export default createComponent({ } }, - runValidator(rule) { + runValidator(rule, value) { return new Promise(resolve => { - const returnVal = rule.validator(this.formValue, rule); + const returnVal = rule.validator(value, rule); if (isPromise(returnVal)) { return returnVal.then(resolve); @@ -159,11 +149,19 @@ export default createComponent({ }); }, - runRuleSync(rule) { - if (rule.required && this.formValueEmpty) { + isEmptyValue(value) { + if (Array.isArray(value)) { + return !value.length; + } + + return !value; + }, + + runSyncRule(rule, value) { + if (rule.required && this.isEmptyValue(value)) { return false; } - if (rule.pattern && !rule.pattern.test(this.formValue)) { + if (rule.pattern && !rule.pattern.test(value)) { return false; } return true; @@ -177,13 +175,19 @@ export default createComponent({ return; } - if (!this.runRuleSync(rule)) { + let value = this.formValue; + + if (rule.formatter) { + value = rule.formatter(value); + } + + if (!this.runSyncRule(rule, value)) { this.validateMessage = rule.message; return; } if (rule.validator) { - return this.runValidator(rule).then(result => { + return this.runValidator(rule, value).then(result => { if (result === false) { this.validateMessage = rule.message; } diff --git a/src/form/README.md b/src/form/README.md index fa0059d79..f6c9cae0b 100644 --- a/src/form/README.md +++ b/src/form/README.md @@ -442,6 +442,7 @@ export default { | validator `v2.5.3` | Custom validator | *(value, rule) => boolean \| Promise* | | pattern `v2.5.3` | Regex pattern | *RegExp* | | trigger `v2.5.2` | When to validate the form,can be set to `onChange`、`onBlur` | *string* | +| formatter `v2.5.3` | Format value before validate | *(value) => any* | ### Events diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md index 48af0391f..1dff9b052 100644 --- a/src/form/README.zh-CN.md +++ b/src/form/README.zh-CN.md @@ -481,6 +481,7 @@ export default { | validator `v2.5.3` | 通过函数进行校验 | *(value, rule) => boolean \| Promise* | | pattern `v2.5.3` | 通过正则表达式进行校验 | *RegExp* | | trigger `v2.5.2` | 本项规则的触发时机,可选值为`onChange`、`onBlur` | *string* | +| formatter `v2.5.3` | 格式化函数,将表单项的值转换后进行校验 | *(value) => any* | ### Events diff --git a/src/form/test/props.spec.js b/src/form/test/props.spec.js index bc8a4e3cf..9494a1f1f 100644 --- a/src/form/test/props.spec.js +++ b/src/form/test/props.spec.js @@ -59,6 +59,35 @@ test('rules prop - pattern', async () => { }); }); +test('rules prop - formatter', async () => { + const onFailed = jest.fn(); + const wrapper = mountForm({ + template: ` + + + + + `, + data() { + return { + rules: [ + { required: true, formatter: val => val.trim(), message: 'foo' }, + ], + }; + }, + methods: { + onFailed, + }, + }); + + await submitForm(wrapper); + + expect(onFailed).toHaveBeenCalledWith({ + errors: [{ message: 'foo', name: 'A' }], + values: { A: ' ' }, + }); +}); + test('rules prop - async validator', async () => { const onFailed = jest.fn(); const wrapper = mountForm({