Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(form): improve documents and support complicated data validate #310

Merged
merged 7 commits into from
Jan 23, 2022
Merged

feat(form): improve documents and support complicated data validate #310

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f1ceb2b
feat(form): improve documents
chaishi Jan 21, 2022
2b173bf
docs(form): improve demo code
chaishi Jan 22, 2022
c5b00b8
feat(form): support complicated data validate
chaishi Jan 22, 2022
9cfd436
test: update snapshots
chaishi Jan 22, 2022
08d8c0d
fix(form): ruleName
chaishi Jan 22, 2022
268037b
feat: update common
chaishi Jan 23, 2022
10e3c1b
Merge remote-tracking branch 'upstream/develop' into fix_form_array_data
chaishi Jan 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
30 changes: 11 additions & 19 deletions examples/form/demos/base.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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>