mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Form): allow validator to return mesage (#8052)
This commit is contained in:
neverland
GitHub
parent
63227201ff
commit
6d336b5537
@ -183,7 +183,10 @@ export default createComponent({
|
||||
|
||||
if (rule.validator) {
|
||||
return runValidator(value, rule).then((result) => {
|
||||
if (result === false) {
|
||||
if (result && typeof result === 'string') {
|
||||
state.validateFailed = true;
|
||||
state.validateMessage = result;
|
||||
} else if (result === false) {
|
||||
state.validateFailed = true;
|
||||
state.validateMessage = getRuleMessage(value, rule);
|
||||
}
|
||||
|
||||
@ -63,11 +63,11 @@ export default {
|
||||
### Validate Rules
|
||||
|
||||
```html
|
||||
<van-form validate-first @failed="onFailed">
|
||||
<van-form @failed="onFailed">
|
||||
<van-field
|
||||
v-model="state.value1"
|
||||
name="pattern"
|
||||
placeholder="USe pattern"
|
||||
placeholder="Use pattern"
|
||||
:rules="[{ pattern, message: 'Error message' }]"
|
||||
/>
|
||||
<van-field
|
||||
@ -78,6 +78,12 @@ export default {
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value3"
|
||||
name="validatorMessage"
|
||||
placeholder="Use validator to return message"
|
||||
:rules="[{ validator: validatorMessage }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value4"
|
||||
name="asyncValidator"
|
||||
placeholder="Use async validator"
|
||||
:rules="[{ validator: asyncValidator, message: 'Error message' }]"
|
||||
@ -105,6 +111,8 @@ export default {
|
||||
|
||||
const validator = (val) => /1\d{10}/.test(val);
|
||||
|
||||
const validatorMessage = (val) => `${val} is invalid`;
|
||||
|
||||
const asyncValidator = (val) =>
|
||||
new Promise((resolve) => {
|
||||
Toast.loading('Validating...');
|
||||
@ -125,6 +133,7 @@ export default {
|
||||
onFailed,
|
||||
validator,
|
||||
asyncValidator,
|
||||
validatorMessage,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -491,7 +500,7 @@ export default {
|
||||
| --- | --- | --- |
|
||||
| required | Whether to be a required field | _boolean_ |
|
||||
| message | Error message | _string \| (value, rule) => string_ |
|
||||
| validator | Custom validator | _(value, rule) => boolean \| Promise_ |
|
||||
| validator | Custom validator | _(value, rule) => boolean \| string \| Promise_ |
|
||||
| pattern | Regex pattern | _RegExp_ |
|
||||
| trigger | When to validate the form，can be set to `onChange`、`onBlur` | _string_ |
|
||||
| formatter | Format value before validate | _(value, rule) => any_ |
|
||||
|
||||
@ -66,10 +66,10 @@ export default {
|
||||
|
||||
### 校验规则
|
||||
|
||||
通过 `rules` 定义表单校验规则，可用字段见[下方表格](#/zh-CN/form#rule-shu-ju-jie-gou)。
|
||||
通过 `rules` 定义表单校验规则，所有可用字段见[下方表格](#/zh-CN/form#rule-shu-ju-jie-gou)。
|
||||
|
||||
```html
|
||||
<van-form validate-first @failed="onFailed">
|
||||
<van-form @failed="onFailed">
|
||||
<!-- 通过 pattern 进行正则校验 -->
|
||||
<van-field
|
||||
v-model="state.value1"
|
||||
@ -84,17 +84,24 @@ export default {
|
||||
placeholder="函数校验"
|
||||
:rules="[{ validator, message: '请输入正确内容' }]"
|
||||
/>
|
||||
<!-- 通过 validator 进行异步函数校验 -->
|
||||
<!-- 通过 validator 返回错误提示 -->
|
||||
<van-field
|
||||
v-model="state.value3"
|
||||
name="validatorMessage"
|
||||
placeholder="校验函数返回错误提示"
|
||||
:rules="[{ validator: validatorMessage }]"
|
||||
/>
|
||||
<!-- 通过 validator 进行异步函数校验 -->
|
||||
<van-field
|
||||
v-model="state.value4"
|
||||
name="asyncValidator"
|
||||
placeholder="异步函数校验"
|
||||
:rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
|
||||
/>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="primary" native-type="submit"
|
||||
>提交</van-button
|
||||
>
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
提交
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
```
|
||||
@ -109,13 +116,17 @@ export default {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: '',
|
||||
});
|
||||
const pattern = /\d{6}/;
|
||||
|
||||
// 校验函数返回 true 表示校验通过，false 表示不通过
|
||||
const validator = (val) => /1\d{10}/.test(val);
|
||||
|
||||
// 异步校验函数返回 Promise
|
||||
// 校验函数可以直接返回一段错误提示
|
||||
const validatorMessage = (val) => `${val} 不合法，请重新输入`;
|
||||
|
||||
// 校验函数可以返回 Promise，实现异步校验
|
||||
const asyncValidator = (val) =>
|
||||
new Promise((resolve) => {
|
||||
Toast.loading('验证中...');
|
||||
@ -528,7 +539,7 @@ export default {
|
||||
| --- | --- | --- |
|
||||
| required | 是否为必选字段 | _boolean_ |
|
||||
| message | 错误提示文案 | _string \| (value, rule) => string_ |
|
||||
| validator | 通过函数进行校验 | _(value, rule) => boolean \| Promise_ |
|
||||
| validator | 通过函数进行校验 | _(value, rule) => boolean \| string \| Promise_ |
|
||||
| pattern | 通过正则表达式进行校验 | _RegExp_ |
|
||||
| trigger | 本项规则的触发时机，可选值为 `onChange`、`onBlur` | _string_ |
|
||||
| formatter | 格式化函数，将表单项的值转换后进行校验 | _(value, rule) => any_ |
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<demo-block :title="t('title')">
|
||||
<van-form validate-first @sumbit="onSubmit" @failed="onFailed">
|
||||
<van-form @sumbit="onSubmit" @failed="onFailed">
|
||||
<van-field
|
||||
v-model="value1"
|
||||
name="pattern"
|
||||
@ -17,6 +17,13 @@
|
||||
/>
|
||||
<van-field
|
||||
v-model="value3"
|
||||
name="validatorMessage"
|
||||
:label="t('label')"
|
||||
:rules="[{ validator: validatorMessage }]"
|
||||
:placeholder="t('validatorMessage')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value4"
|
||||
name="asyncValidator"
|
||||
:label="t('label')"
|
||||
:rules="[{ validator: asyncValidator, message: t('message') }]"
|
||||
@ -42,20 +49,24 @@ const i18n = {
|
||||
title: '校验规则',
|
||||
submit: '提交',
|
||||
message: '请输入正确内容',
|
||||
invalid: (val) => `${val} 不合法，请重新输入`,
|
||||
pattern: '正则校验',
|
||||
validator: '函数校验',
|
||||
validating: '验证中...',
|
||||
asyncValidator: '异步函数校验',
|
||||
validatorMessage: '校验函数返回错误提示',
|
||||
},
|
||||
'en-US': {
|
||||
label: 'Label',
|
||||
title: 'Validate Rules',
|
||||
submit: 'Submit',
|
||||
message: 'Error message',
|
||||
invalid: (val) => `${val} is invalid`,
|
||||
pattern: 'Use pattern',
|
||||
validator: 'Use validator',
|
||||
validating: 'Validating...',
|
||||
asyncValidator: 'Use async validator',
|
||||
validatorMessage: 'Use validator to return message',
|
||||
},
|
||||
};
|
||||
|
||||
@ -65,11 +76,14 @@ export default {
|
||||
const state = reactive({
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value3: 'abc',
|
||||
value4: '',
|
||||
});
|
||||
|
||||
const validator = (val) => /1\d{10}/.test(val);
|
||||
|
||||
const validatorMessage = (val) => t('invalid', val);
|
||||
|
||||
const asyncValidator = (val) =>
|
||||
new Promise((resolve) => {
|
||||
Toast.loading(t('validating'));
|
||||
@ -96,6 +110,7 @@ export default {
|
||||
onFailed,
|
||||
validator,
|
||||
asyncValidator,
|
||||
validatorMessage,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@ -82,6 +82,22 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Label
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="validatorMessage"
|
||||
class="van-field__control"
|
||||
placeholder="Use validator to return message"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
|
||||
@ -6,11 +6,11 @@ test('submit method', async () => {
|
||||
|
||||
mountForm({
|
||||
template: `
|
||||
<van-form ref="form" @submit="onSubmit">
|
||||
<van-field name="A" value="bar" />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
<van-form ref="form" @submit="onSubmit">
|
||||
<van-field name="A" value="bar" />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
mounted() {
|
||||
this.$refs.form.submit();
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user