mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Form): optimize details
This commit is contained in:
陈嘉涵
parent
57d59e8a86
commit
567c161c06
@ -31,7 +31,9 @@ Vue.use(Form);
|
||||
:rules="[{ required: true, message: 'Password is required' }]"
|
||||
/>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="info">Submit</van-button>
|
||||
<van-button round block type="info" native-type="submit">
|
||||
Submit
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
```
|
||||
@ -55,11 +57,13 @@ export default {
|
||||
### Validate Rules
|
||||
|
||||
```html
|
||||
<van-form @submit="onSubmit" @failed="onFailed">
|
||||
<van-field v-model="value" name="phone" label="Phone" :rules="rules.phone" />
|
||||
<van-field v-model="code" name="code" label="Code" :rules="rules.code" />
|
||||
<van-form validate-first @submit="onSubmit" @failed="onFailed">
|
||||
<van-field v-model="phone" name="phone" label="Phone" :rules="phoneRules" />
|
||||
<van-field v-model="code" name="code" label="Code" :rules="codeRules" />
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="info">Submit</van-button>
|
||||
<van-button round block type="info" native-type="submit">
|
||||
Submit
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
```
|
||||
@ -69,23 +73,24 @@ import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
this.rules = {
|
||||
phone: [
|
||||
this.phoneRules = [
|
||||
{ required: true, message: 'Phone is required' },
|
||||
{ validator: val => this.validatePhone, message: 'Incorrect phone' },
|
||||
],
|
||||
code: [
|
||||
{ validator: this.phoneValidator, message: 'Incorrect phone' },
|
||||
];
|
||||
this.codeRules = [
|
||||
{ required: true, message: 'Code is required' },
|
||||
{ validator: this.validateCode, message: 'Incorrect code' },
|
||||
],
|
||||
{ validator: this.codeValidator, message: 'Incorrect code' },
|
||||
];
|
||||
return {
|
||||
code: '',
|
||||
phone: '',
|
||||
};
|
||||
return { value: '' };
|
||||
},
|
||||
methods: {
|
||||
validatePhone(val) {
|
||||
phoneValidator(val) {
|
||||
return /1\d{10}/.test(val);
|
||||
},
|
||||
validateCode(val) {
|
||||
codeValidator(val) {
|
||||
return new Promise(resolve => {
|
||||
Toast.loading('Validating...');
|
||||
|
||||
|
||||
@ -37,7 +37,9 @@ Vue.use(Form);
|
||||
:rules="[{ required: true, message: '请填写密码' }]"
|
||||
/>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="info">提交</van-button>
|
||||
<van-button round block type="info" native-type="submit">
|
||||
提交
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
```
|
||||
@ -60,14 +62,16 @@ export default {
|
||||
|
||||
### 校验规则
|
||||
|
||||
在`rules`中，可以通过`validator`字段定义校验函数
|
||||
通过`rules`中的`validator`字段定义校验函数
|
||||
|
||||
```html
|
||||
<van-form @submit="onSubmit" @failed="onFailed">
|
||||
<van-field v-model="value" name="phone" label="手机号" :rules="rules.phone" />
|
||||
<van-field v-model="code" name="code" label="验证码" :rules="rules.code" />
|
||||
<van-form validate-first @submit="onSubmit" @failed="onFailed">
|
||||
<van-field v-model="phone" name="phone" label="手机号" :rules="phoneRules" />
|
||||
<van-field v-model="code" name="code" label="验证码" :rules="codeRules" />
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="info">提交</van-button>
|
||||
<van-button round block type="info" native-type="submit">
|
||||
提交
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
```
|
||||
@ -77,25 +81,26 @@ import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
this.rules = {
|
||||
phone: [
|
||||
this.phoneRules = [
|
||||
{ required: true, message: '请输入手机号' },
|
||||
{ validator: val => this.validatePhone, message: '手机号格式错误' },
|
||||
],
|
||||
code: [
|
||||
{ validator: this.phoneValidator, message: '手机号格式错误' },
|
||||
];
|
||||
this.codeRules = [
|
||||
{ required: true, message: '请输入验证码' },
|
||||
{ validator: this.validateCode, message: '验证码错误' },
|
||||
],
|
||||
{ validator: this.codeValidator, message: '验证码错误' },
|
||||
];
|
||||
return {
|
||||
code: '',
|
||||
phone: '',
|
||||
};
|
||||
return { value: '' };
|
||||
},
|
||||
methods: {
|
||||
// 校验函数返回 true 表示校验通过，false 表示不通过
|
||||
validatePhone(val) {
|
||||
phoneValidator(val) {
|
||||
return /1\d{10}/.test(val);
|
||||
},
|
||||
// 校验函数返回 Promise 来实现异步校验
|
||||
validateCode(val) {
|
||||
codeValidator(val) {
|
||||
return new Promise(resolve => {
|
||||
Toast.loading('验证中...');
|
||||
|
||||
|
||||
@ -17,7 +17,9 @@
|
||||
:placeholder="$t('password')"
|
||||
/>
|
||||
<div style="margin: 16px 16px 0;">
|
||||
<van-button type="info" round block>{{ $t('submit') }}</van-button>
|
||||
<van-button round block type="info" native-type="submit">
|
||||
{{ $t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
|
||||
@ -53,7 +53,9 @@
|
||||
<field-type-calendar />
|
||||
|
||||
<div style="margin: 16px 16px 0;">
|
||||
<van-button type="info" round block>{{ $t('submit') }}</van-button>
|
||||
<van-button round block type="info" native-type="submit">
|
||||
{{ $t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
|
||||
@ -5,18 +5,20 @@
|
||||
v-model="phone"
|
||||
name="phone"
|
||||
:label="$t('phone')"
|
||||
:rules="rules.phone"
|
||||
:rules="phoneRules"
|
||||
:placeholder="$t('phone')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="code"
|
||||
name="code"
|
||||
:label="$t('code')"
|
||||
:rules="rules.code"
|
||||
:rules="codeRules"
|
||||
:placeholder="$t('code')"
|
||||
/>
|
||||
<div style="margin: 16px 16px 0;">
|
||||
<van-button type="info" round block>{{ $t('submit') }}</van-button>
|
||||
<van-button round block type="info" native-type="submit">
|
||||
{{ $t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
@ -57,30 +59,29 @@ export default {
|
||||
},
|
||||
|
||||
created() {
|
||||
this.rules = {
|
||||
phone: [
|
||||
this.phoneRules = [
|
||||
{ required: true, message: this.$t('requirePhone') },
|
||||
{
|
||||
validator: this.validatePhone,
|
||||
validator: this.phoneValidator,
|
||||
message: this.$t('incorrectPhone'),
|
||||
},
|
||||
],
|
||||
code: [
|
||||
];
|
||||
|
||||
this.codeRules = [
|
||||
{ required: true, message: this.$t('requireCode') },
|
||||
{
|
||||
validator: this.validateCode,
|
||||
validator: this.codeValidator,
|
||||
message: this.$t('incorrectCode'),
|
||||
},
|
||||
],
|
||||
};
|
||||
];
|
||||
},
|
||||
|
||||
methods: {
|
||||
validatePhone(val) {
|
||||
phoneValidator(val) {
|
||||
return /1\d{10}/.test(val);
|
||||
},
|
||||
|
||||
validateCode(val) {
|
||||
codeValidator(val) {
|
||||
return new Promise(resolve => {
|
||||
this.$toast.loading(this.$t('validating'));
|
||||
|
||||
|
||||
@ -16,7 +16,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-field__body"><input type="password" name="password" placeholder="密码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 16px 16px 0px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
|
||||
<div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
|
||||
提交
|
||||
</span></button></div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
@ -33,7 +35,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-field__body"><input type="text" name="code" placeholder="验证码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 16px 16px 0px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
|
||||
<div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
|
||||
提交
|
||||
</span></button></div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
@ -210,7 +214,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div style="margin: 16px 16px 0px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
|
||||
<div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
|
||||
提交
|
||||
</span></button></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user