blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(Form): optimize details

Browse Source
This commit is contained in:
陈嘉涵 2020-02-12 17:41:38 +08:00
parent 57d59e8a86
commit 567c161c06
6 changed files with 82 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/form/README.md
View File

@ -31,7 +31,9 @@ Vue.use(Form);
:rules="[{ required: true, message: 'Password is required' }]" :rules="[{ required: true, message: 'Password is required' }]"
/> />
<div style="margin: 16px;"> <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> </div>
</van-form> </van-form>
``` ```
@ -55,11 +57,13 @@ export default {
### Validate Rules ### Validate Rules
```html ```html
<van-form @submit="onSubmit" @failed="onFailed"> <van-form validate-first @submit="onSubmit" @failed="onFailed">
<van-field v-model="value" name="phone" label="Phone" :rules="rules.phone" /> <van-field v-model="phone" name="phone" label="Phone" :rules="phoneRules" />
<van-field v-model="code" name="code" label="Code" :rules="rules.code" /> <van-field v-model="code" name="code" label="Code" :rules="codeRules" />
<div style="margin: 16px;"> <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> </div>
</van-form> </van-form>
``` ```
@ -69,23 +73,24 @@ import { Toast } from 'vant';
export default { export default {
data() { data() {
this.rules = { this.phoneRules = [
phone: [ { required: true, message: 'Phone is required' },
{ required: true, message: 'Phone is required' }, { validator: this.phoneValidator, message: 'Incorrect phone' },
{ validator: val => this.validatePhone, message: 'Incorrect phone' }, ];
], this.codeRules = [
code: [ { required: true, message: 'Code is required' },
{ required: true, message: 'Code is required' }, { validator: this.codeValidator, message: 'Incorrect code' },
{ validator: this.validateCode, message: 'Incorrect code' }, ];
], return {
code: '',
phone: '',
}; };
return { value: '' };
}, },
methods: { methods: {
validatePhone(val) { phoneValidator(val) {
return /1\d{10}/.test(val); return /1\d{10}/.test(val);
}, },
validateCode(val) { codeValidator(val) {
return new Promise(resolve => { return new Promise(resolve => {
Toast.loading('Validating...'); Toast.loading('Validating...');

41
src/form/README.zh-CN.md
View File

@ -37,7 +37,9 @@ Vue.use(Form);
:rules="[{ required: true, message: '请填写密码' }]" :rules="[{ required: true, message: '请填写密码' }]"
/> />
<div style="margin: 16px;"> <div style="margin: 16px;">
<van-button round block type="info">提交</van-button> <van-button round block type="info" native-type="submit">
提交
</van-button>
</div> </div>
</van-form> </van-form>
``` ```
@ -60,14 +62,16 @@ export default {
### 校验规则 ### 校验规则
在`rules`中，可以通过`validator`字段定义校验函数 通过`rules`中的`validator`字段定义校验函数
```html ```html
<van-form @submit="onSubmit" @failed="onFailed"> <van-form validate-first @submit="onSubmit" @failed="onFailed">
<van-field v-model="value" name="phone" label="手机号" :rules="rules.phone" /> <van-field v-model="phone" name="phone" label="手机号" :rules="phoneRules" />
<van-field v-model="code" name="code" label="验证码" :rules="rules.code" /> <van-field v-model="code" name="code" label="验证码" :rules="codeRules" />
<div style="margin: 16px;"> <div style="margin: 16px;">
<van-button round block type="info">提交</van-button> <van-button round block type="info" native-type="submit">
提交
</van-button>
</div> </div>
</van-form> </van-form>
``` ```
@ -77,25 +81,26 @@ import { Toast } from 'vant';
export default { export default {
data() { data() {
this.rules = { this.phoneRules = [
phone: [ { required: true, message: '请输入手机号' },
{ required: true, message: '请输入手机号' }, { validator: this.phoneValidator, message: '手机号格式错误' },
{ validator: val => this.validatePhone, message: '手机号格式错误' }, ];
], this.codeRules = [
code: [ { required: true, message: '请输入验证码' },
{ required: true, message: '请输入验证码' }, { validator: this.codeValidator, message: '验证码错误' },
{ validator: this.validateCode, message: '验证码错误' }, ];
], return {
code: '',
phone: '',
}; };
return { value: '' };
}, },
methods: { methods: {
// 校验函数返回 true 表示校验通过，false 表示不通过 // 校验函数返回 true 表示校验通过，false 表示不通过
validatePhone(val) { phoneValidator(val) {
return /1\d{10}/.test(val); return /1\d{10}/.test(val);
}, },
// 校验函数返回 Promise 来实现异步校验 // 校验函数返回 Promise 来实现异步校验
validateCode(val) { codeValidator(val) {
return new Promise(resolve => { return new Promise(resolve => {
Toast.loading('验证中...'); Toast.loading('验证中...');

4
src/form/demo/BasicUsage.vue
View File

@ -17,7 +17,9 @@
:placeholder="$t('password')" :placeholder="$t('password')"
/> />
<div style="margin: 16px 16px 0;"> <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> </div>
</van-form> </van-form>
</demo-block> </demo-block>

4
src/form/demo/FieldType.vue
View File

@ -53,7 +53,9 @@
<field-type-calendar /> <field-type-calendar />
<div style="margin: 16px 16px 0;"> <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> </div>
</van-form> </van-form>
</demo-block> </demo-block>

43
src/form/demo/ValidateRules.vue
View File

@ -5,18 +5,20 @@
v-model="phone" v-model="phone"
name="phone" name="phone"
:label="$t('phone')" :label="$t('phone')"
:rules="rules.phone" :rules="phoneRules"
:placeholder="$t('phone')" :placeholder="$t('phone')"
/> />
<van-field <van-field
v-model="code" v-model="code"
name="code" name="code"
:label="$t('code')" :label="$t('code')"
:rules="rules.code" :rules="codeRules"
:placeholder="$t('code')" :placeholder="$t('code')"
/> />
<div style="margin: 16px 16px 0;"> <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> </div>
</van-form> </van-form>
</demo-block> </demo-block>
@ -57,30 +59,29 @@ export default {
}, },
created() { created() {
this.rules = { this.phoneRules = [
phone: [ { required: true, message: this.$t('requirePhone') },
{ required: true, message: this.$t('requirePhone') }, {
{ validator: this.phoneValidator,
validator: this.validatePhone, message: this.$t('incorrectPhone'),
message: this.$t('incorrectPhone'), },
}, ];
],
code: [ this.codeRules = [
{ required: true, message: this.$t('requireCode') }, { required: true, message: this.$t('requireCode') },
{ {
validator: this.validateCode, validator: this.codeValidator,
message: this.$t('incorrectCode'), message: this.$t('incorrectCode'),
}, },
], ];
};
}, },
methods: { methods: {
validatePhone(val) { phoneValidator(val) {
return /1\d{10}/.test(val); return /1\d{10}/.test(val);
}, },
validateCode(val) { codeValidator(val) {
return new Promise(resolve => { return new Promise(resolve => {
this.$toast.loading(this.$t('validating')); this.$toast.loading(this.$t('validating'));

12
src/form/test/__snapshots__/demo.spec.js.snap
View File

@ -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 class="van-field__body"><input type="password" name="password" placeholder="密码" class="van-field__control"></div>
</div> </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> </form>
</div> </div>
<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 class="van-field__body"><input type="text" name="code" placeholder="验证码" class="van-field__control"></div>
</div> </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> </form>
</div> </div>
<div> <div>
@ -210,7 +214,9 @@ exports[`renders demo correctly 1`] = `
</div> </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> </form>
</div> </div>
</div> </div>