Skip to content

Commit

Permalink
feat(form): improve documents and support complicated data validate (#…
Browse files Browse the repository at this point in the history 
…310)

* feat(form): improve documents

* docs(form): improve demo code

* feat(form): support complicated data validate

* test: update snapshots

* fix(form): ruleName

* feat: update common

Co-authored-by: chaishi <yaoyanhuoyi@qq.com>
  • Loading branch information
@chaishi
chaishi and chaishi committed Jan 23, 2022
1 parent 19550dc commit 817bfd9
Show file tree
Hide file tree
Showing 13 changed files with 1,177 additions and 117 deletions.
30 changes: 11 additions & 19 deletions examples/form/demos/base.vue
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,32 @@
<template>
<div>
<t-form
:data="formData"
ref="form"
@reset="onReset"
@submit="onSubmit"
:colon="true"
>
<t-form-item label="姓名" name='name'>
<t-form :data="formData" ref="form" @reset="onReset" @submit="onSubmit" :colon="true">
<t-form-item label="姓名" name="name">
<t-input v-model="formData.name" placeholder="请输入内容"></t-input>
</t-form-item>
<t-form-item label="手机号码" name='tel'>
<t-form-item label="手机号码" name="tel">
<t-input v-model="formData.tel" placeholder="请输入内容"></t-input>
</t-form-item>
<t-form-item label="接收短信" name='status'>
<t-form-item label="接收短信" name="status">
<t-switch v-model="formData.status"></t-switch>
</t-form-item>
<t-form-item label="性别" name='gender'>
<t-radio-group v-model="formData.gender" >
<t-form-item label="性别" name="gender">
<t-radio-group v-model="formData.gender">
<t-radio value="1">男</t-radio>
<t-radio value="2">女</t-radio>
</t-radio-group>
</t-form-item>
<t-form-item label="课程" name='course'>
<t-checkbox-group
v-model="formData.course"
:options="courseOptions"
></t-checkbox-group>
<t-form-item label="课程" name="course">
<t-checkbox-group v-model="formData.course" :options="courseOptions"></t-checkbox-group>
</t-form-item>
<t-form-item style="padding-top: 8px">
<t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
<t-button theme="default" variant="base" type="reset">重置</t-button>
<t-button theme="default" variant="base" type="reset">重置</t-button>
</t-form-item>
</t-form>
</div>
</template>
<script>
const INITIAL_DATA = {
name: '',
tel: '',
Expand All @@ -58,9 +48,11 @@ export default {
},
methods: {
// 重置方法：this.$refs.reset()
onReset() {
this.$message.success('重置成功');
},
// 提交方法：this.$refs.submit()
onSubmit({ validateResult, firstError }) {
if (validateResult === true) {
this.$message.success('提交成功');
Expand Down
149 changes: 149 additions & 0 deletions examples/form/demos/clear-validate.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
<template>
<div>
<t-form :data="formData" :rules="rules" ref="form" @reset="onReset" @submit="onSubmit" scrollToFirstError="smooth">
<t-form-item label="用户名" help="这是用户名字段帮助说明" name="account">
<t-input v-model="formData.account"></t-input>
</t-form-item>
<t-form-item label="个人简介" help="一句话介绍自己" name="description">
<t-input v-model="formData.description"></t-input>
</t-form-item>
<t-form-item label="密码" name="password">
<t-input type="password" v-model="formData.password"></t-input>
</t-form-item>
<t-form-item label="邮箱" name="email">
<t-input v-model="formData.email"></t-input>
</t-form-item>
<t-form-item label="性别" name="gender">
<t-radio-group v-model="formData.gender">
<t-radio value="male">男</t-radio>
<t-radio value="femal">女</t-radio>
</t-radio-group>
</t-form-item>
<t-form-item label="课程" name="course">
<t-checkbox-group v-model="formData.course" :options="courseOptions"></t-checkbox-group>
</t-form-item>
<t-form-item label="学院" name="college">
<t-select v-model="formData.college" class="demo-select-base" clearable>
<t-option v-for="(item, index) in options" :value="item.value" :label="item.label" :key="index">
{{ item.label }}
</t-option>
</t-select>
</t-form-item>
<t-form-item
label="入学时间"
name="date"
:rules="[{ date: { delimiters: ['/', '-', '.'] }, message: '日期格式有误' }]"
>
<t-input v-model="formData.date"></t-input>
</t-form-item>
<t-form-item label="个人网站" name="content.url">
<t-input v-model="formData.content.url"></t-input>
</t-form-item>
<t-form-item style="padding-top: 8px">
<t-button theme="primary" type="submit" style="margin-right: 10px"> 提交 </t-button>
<t-button theme="default" variant="base" type="reset" style="margin-right: 10px"> 重置 </t-button>
<t-button theme="default" variant="base" @click="handleClear" style="margin-right: 10px">
清空校验结果
</t-button>
<t-button theme="default" variant="base" @click="clearFieldsValidateResult"> 清除指定字段的校验结果 </t-button>
</t-form-item>
</t-form>
</div>
</template>
<script>
const INITIAL_DATA = {
account: '',
password: '',
description: '',
email: '',
gender: '',
college: '',
date: '',
content: {
url: '',
},
course: [],
};
export default {
data() {
return {
formData: { ...INITIAL_DATA },
courseOptions: [
{ label: '语文', value: '1' },
{ label: '数学', value: '2' },
{ label: '英语', value: '3' },
{ label: '体育', value: '4' },
],
options: [
{ label: '计算机学院', value: '1' },
{ label: '软件学院', value: '2' },
{ label: '物联网学院', value: '3' },
],
rules: {
account: [
{ required: true, message: '姓名必填' },
{ min: 2, message: '至少需要两个字符，一个中文等于两个字符' },
{ max: 10, message: '姓名字符长度超出' },
],
description: [
{ validator: (val) => val.length >= 5, message: '至少 5 个字，中文长度等于英文长度' },
{ validator: (val) => val.length < 20, message: '不能超过 20 个字，中文长度等于英文长度' },
],
password: [
{ required: true, message: '密码必填' },
{ len: 8, message: '请输入 8 位密码' },
{ pattern: /[A-Z]+/, message: '密码必须包含大写字母' },
],
email: [
{ required: true, message: '邮箱必填' },
{ email: { ignore_max_length: true }, message: '请输入正确的邮箱地址' },
],
gender: [{ required: true, message: '性别必填' }],
course: [
{ required: true, message: '课程必填' },
{ validator: (val) => val.length <= 2, message: '最多选择 2 门课程' },
],
'content.url': [
{ required: true, message: '个人网站必填' },
{
url: {
protocols: ['http', 'https', 'ftp'],
require_protocol: true,
},
message: '请输入正确的个人主页',
},
],
},
};
},
methods: {
onReset() {
this.$message.success('重置成功');
console.log('formData', this.formData);
},
onSubmit({ validateResult, firstError }) {
if (validateResult === true) {
this.$message.success('提交成功');
} else {
console.log('Errors: ', validateResult);
this.$message.warning(firstError);
}
},
handleClear() {
this.$refs.form.clearValidate();
},
// 清除指定字段的校验结果
clearFieldsValidateResult() {
this.$refs.form.clearValidate(['email', 'course', 'content.url']);
this.$message.success('已清除邮箱、课程、个人网站等字段校验结果');
},
},
};
</script>

<style scoped>
.demo-select-base {
width: 300px;
}
</style>
55 changes: 29 additions & 26 deletions examples/form/demos/custom-validator.vue
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,27 @@
<template>
<div>
<t-form
:data="formData"
:rules="rules"
ref="form"
@reset="onReset"
@submit="onSubmit"
@validate="onValidate"
>
<t-form-item label="用户名" name="account">
<t-input v-model="formData.account" @blur="handleBlur()"></t-input>
<t-form :data="formData" :rules="rules" ref="form" @reset="onReset" @submit="onSubmit" @validate="onValidate">
<t-form-item label="用户名" name="account">
<t-input v-model="formData.account"></t-input>
</t-form-item>
<t-form-item label="密码" name="password" help="同一个校验方法可输出不同的错误信息和类型，依次输入：1234 观察变化">
<t-input
type="password"
v-model="formData.password"
></t-input>
<t-form-item
label="密码"
name="password"
help="同一个校验方法可输出不同的错误信息和类型，依次输入：1234 观察变化"
>
<t-input type="password" v-model="formData.password"></t-input>
</t-form-item>
<t-form-item label="确认密码" name="rePassword" help="在此处体验普通自定义校验方法">
<t-input
type="password"
v-model="formData.rePassword"
></t-input>
<t-form-item label="确认密码" name="rePassword" help="自定义异步校验方法">
<t-input type="password" v-model="formData.rePassword"></t-input>
</t-form-item>
<t-form-item style="padding-top: 8px">
<t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
<t-button theme="default" variant="base" type="reset">重置</t-button>
<t-button theme="default" variant="base" type="reset">重置</t-button>
</t-form-item>
</t-form>
</div>
</template>
<script>
const INITIAL_DATA = {
account: '',
password: '',
Expand All @@ -43,19 +33,19 @@ export default {
formData: { ...INITIAL_DATA },
rules: {
account: [
{ required: true, message: '姓名必填', type: 'error' },
{ required: true, message: '用户名必填', type: 'error' },
{
min: 2, message: '至少需要两个字', type: 'error', trigger: 'blur',
validator: this.userNameValidator,
},
],
password: [
{ required: true, message: '密码必填', type: 'error' },
// 不同的校验结果有不同的错误信息提醒，切错误信息类型不同
// 自定义校验规则：不同的值可以有不同的校验结果，不同的校验类型
{ validator: this.passwordValidator },
],
rePassword: [
// 自定义校验规则
{ required: true, message: '密码必填', type: 'error' },
// 自定义校验规则：自定义异步校验规则
{ validator: this.rePassword, message: '两次密码不一致' },
],
},
Expand Down Expand Up @@ -87,6 +77,19 @@ export default {
trigger: 'blur',
});
},
// 自定义异步校验器，使用 resolve 返回结果控制校验结果、校验信息、校验结果类型
userNameValidator(val) {
return new Promise((resolve) => {
const timer = setTimeout(() => {
if (['Zhang', 'Li', 'Wang'].includes(val)) {
resolve({ result: true });
} else {
resolve({ result: false, message: '用户名不存在', type: 'error' });
}
clearTimeout(timer);
}, 10);
});
},
// 自定义校验器，不同的值输出不同的校验结果。支持异步校验（文案选自某密码重置站点，如有侵权，请联系我们删除）
passwordValidator(val) {
if (val.length > 0 && val.length <= 2) {
Expand Down
66 changes: 66 additions & 0 deletions examples/form/demos/disabled.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<template>
<div>
<t-form :data="formData" ref="form" @reset="onReset" @submit="onSubmit" :colon="true">
<t-form-item label="姓名" name="name">
<t-input v-model="formData.name" placeholder="请输入内容"></t-input>
</t-form-item>
<t-form-item label="手机号码" name="tel">
<t-input v-model="formData.tel" placeholder="请输入内容"></t-input>
</t-form-item>
<t-form-item label="接收短信" name="status">
<t-switch v-model="formData.status"></t-switch>
</t-form-item>
<t-form-item label="性别" name="gender">
<t-radio-group v-model="formData.gender">
<t-radio value="1">男</t-radio>
<t-radio value="2">女</t-radio>
</t-radio-group>
</t-form-item>
<t-form-item label="课程" name="course">
<t-checkbox-group v-model="formData.course" :options="courseOptions"></t-checkbox-group>
</t-form-item>
<t-form-item style="padding-top: 8px">
<t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
<t-button theme="default" variant="base" type="reset">重置</t-button>
</t-form-item>
</t-form>
</div>
</template>
<script>
const INITIAL_DATA = {
name: '',
tel: '',
gender: '',
course: [],
status: false,
};
export default {
data() {
return {
formData: { ...INITIAL_DATA },
courseOptions: [
{ label: '语文', value: '1' },
{ label: '数学', value: '2' },
{ label: '英语', value: '3' },
],
};
},
methods: {
// 重置方法：this.$refs.reset()
onReset() {
this.$message.success('重置成功');
},
// 提交方法：this.$refs.submit()
onSubmit({ validateResult, firstError }) {
if (validateResult === true) {
this.$message.success('提交成功');
} else {
console.log('Errors: ', validateResult);
this.$message.warning(firstError);
}
},
},
};
</script>
Loading

0 comments on commit 817bfd9

Please sign in to comment.