Skip to content

fix(form-demo): add form validateField api demo #424

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

Merged
merged 1 commit into from
Aug 21, 2023
Merged

fix(form-demo): add form validateField api demo #424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 151 additions & 0 deletions examples/sites/demos/app/form/form-validate-field-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
<template>
<div class="demo-form">
<tiny-form
ref="ruleFormRef"
hide-required-asterisk
:model="createData"
:rules="rules"
label-width="100px"
show-message
>
<tiny-form-item label="姓名" prop="users" required :validate-icon="validateIcon">
<tiny-input v-model="createData.users"></tiny-input>
</tiny-form-item>
<tiny-form-item label="日期" prop="datepicker">
<tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
</tiny-form-item>
<tiny-form-item label="URL" prop="url">
<tiny-input v-model="createData.url"></tiny-input>
</tiny-form-item>
<tiny-form-item label="等级" prop="radio">
<tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
</tiny-form-item>
<tiny-form-item label="邮件" prop="email">
<tiny-input v-model="createData.email"></tiny-input>
</tiny-form-item>
<tiny-form-item label="文本">
<tiny-input v-model="createData.textarea" type="textarea" maxlength="15"></tiny-input>
</tiny-form-item>
<tiny-form-item label="级联选择器" prop="cascader">
<tiny-cascader
v-model="createData.cascader"
:options="options2"
:popper-append-to-body="true"
filterable
></tiny-cascader>
</tiny-form-item>
<tiny-form-item label="Numeric字段" prop="num1">
<tiny-numeric v-model="createData.num1"></tiny-numeric>
</tiny-form-item>
<tiny-form-item label="IP字段" prop="ip">
<tiny-ip-address v-model="createData.ip"></tiny-ip-address>
</tiny-form-item>
<tiny-form-item>
<tiny-button type="primary" @click="validateSingleField"> 检验单个字段 </tiny-button>
<tiny-button type="primary" @click="validateFields"> 校验特定字段 </tiny-button>
</tiny-form-item>
</tiny-form>
</div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {
Form as TinyForm,
FormItem as TinyFormItem,
Input as TinyInput,
DatePicker as TinyDatePicker,
Button as TinyButton,
Modal,
RadioGroup as TinyRadioGroup,
Cascader as TinyCascader,
Numeric as TinyNumeric,
IpAddress as TinyIpAddress
} from '@opentiny/vue'
import { iconWarning } from '@opentiny/vue-icon'

const ruleFormRef = ref()
function handleClick() {
Modal.message({ message: 'click' })
}
const validateIcon = ref(iconWarning())
const options = ref([
{ label: 'A', text: '很好', events: { click: handleClick } },
{ label: 'B', text: '一般' }
])
const options2 = ref([
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'anzhuang',
label: '安装'
},
{
value: 'kaifa',
label: '开发'
}
]
}
])
const createData = reactive({
radio: '',
users: '',
url: '',
email: '',
datepicker: '',
textarea: '',
ip: '',
num1: 0,
cascader: [] // 注意:级联选择器放在表单中校验时，默认值必须是数组
})
const rules = ref({
radio: [{ required: true, message: '必填', trigger: 'change' }],
users: [
{ required: true, message: '必填', trigger: 'blur' },
{ min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
],
datepicker: { type: 'date' },
url: { type: 'url', required: true },
email: { type: 'email' },
cascader: [{ required: true, message: '必填', trigger: 'blur' }],
ip: [
{
validator: (rule, value, cb) => (value === '1.1.1.1' ? cb() : cb(new Error('必填1.1.1.1'))),
trigger: 'change'
}
],
num1: [{ type: 'number', min: 2, max: 11, message: '必填 2~11 之间的数字', trigger: 'change' }]
})

function validateSingleField() {
ruleFormRef.value.validateField('users', (errMsg, fieldConfig) => {
if (errMsg) {
console.log(fieldConfig)
} else {
Modal.alert('姓名通过校验')
}
})
}

async function validateFields() {
const errArray = []
await ruleFormRef.value.validateField(['url', 'datepicker'], (errMsg, fieldConfig) => {
if (errMsg) {
errArray.push(fieldConfig)
}
})
if (errArray.length > 0) {
console.log(errArray)
} else {
Modal.alert('日期和url通过校验')
}
}
</script>

<style scoped>
.demo-form {
width: 380px;
}
</style>
163 changes: 163 additions & 0 deletions examples/sites/demos/app/form/form-validate-field.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
<template>
<div class="demo-form">
<tiny-form
ref="ruleFormRef"
hide-required-asterisk
:model="createData"
:rules="rules"
label-width="100px"
show-message
>
<tiny-form-item label="姓名" prop="users" required :validate-icon="validateIcon">
<tiny-input v-model="createData.users"></tiny-input>
</tiny-form-item>
<tiny-form-item label="日期" prop="datepicker">
<tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
</tiny-form-item>
<tiny-form-item label="URL" prop="url">
<tiny-input v-model="createData.url"></tiny-input>
</tiny-form-item>
<tiny-form-item label="等级" prop="radio">
<tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
</tiny-form-item>
<tiny-form-item label="邮件" prop="email">
<tiny-input v-model="createData.email"></tiny-input>
</tiny-form-item>
<tiny-form-item label="文本">
<tiny-input v-model="createData.textarea" type="textarea" maxlength="15"></tiny-input>
</tiny-form-item>
<tiny-form-item label="级联选择器" prop="cascader">
<tiny-cascader
v-model="createData.cascader"
:options="options2"
:popper-append-to-body="true"
filterable
></tiny-cascader>
</tiny-form-item>
<tiny-form-item label="Numeric字段" prop="num1">
<tiny-numeric v-model="createData.num1"></tiny-numeric>
</tiny-form-item>
<tiny-form-item label="IP字段" prop="ip">
<tiny-ip-address v-model="createData.ip"></tiny-ip-address>
</tiny-form-item>
<tiny-form-item>
<tiny-button type="primary" @click="validateSingleField"> 检验单个字段 </tiny-button>
<tiny-button type="primary" @click="validateFields"> 校验特定字段 </tiny-button>
</tiny-form-item>
</tiny-form>
</div>
</template>

<script>
import {
Form,
FormItem,
Input,
DatePicker,
Button,
Modal,
RadioGroup,
Cascader,
Numeric,
IpAddress
} from '@opentiny/vue'
import { iconWarning } from '@opentiny/vue-icon'

export default {
components: {
TinyForm: Form,
TinyFormItem: FormItem,
TinyInput: Input,
TinyDatePicker: DatePicker,
TinyButton: Button,
TinyRadioGroup: RadioGroup,
TinyCascader: Cascader,
TinyNumeric: Numeric,
TinyIpAddress: IpAddress
},
data() {
return {
validateIcon: iconWarning(),
options: [
{ label: 'A', text: '很好', events: { click: this.handleClick } },
{ label: 'B', text: '一般' }
],
options2: [
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'anzhuang',
label: '安装'
},
{
value: 'kaifa',
label: '开发'
}
]
}
],
createData: {
radio: '',
users: '',
url: '',
email: '',
datepicker: '',
textarea: '',
ip: '',
num1: 0,
cascader: [] // 注意:级联选择器放在表单中校验时，默认值必须是数组
},
rules: {
radio: [{ required: true, message: '必填', trigger: 'change' }],
users: [
{ required: true, message: '必填', trigger: 'blur' },
{ min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
],
datepicker: { type: 'date' },
url: { type: 'url', required: true },
email: { type: 'email' },
cascader: [{ required: true, message: '必填', trigger: 'blur' }],
ip: [
{
validator: (rule, value, cb) => (value === '1.1.1.1' ? cb() : cb(new Error('必填1.1.1.1'))),
trigger: 'change'
}
],
num1: [{ type: 'number', min: 2, max: 11, message: '必填 2~11 之间的数字', trigger: 'change' }]
}
}
},
methods: {
validateSingleField() {
this.$refs.ruleFormRef.validateField('users', (errMsg, fieldConfig) => {
if (errMsg) {
console.log(fieldConfig)
} else {
Modal.alert('姓名通过校验')
}
})
},
async validateFields() {
const errArray = []
await this.$refs.ruleFormRef.validateField(['url', 'datepicker'], (errMsg, fieldConfig) => {
if (errMsg) {
errArray.push(fieldConfig)
}
})
if (errArray.length > 0) {
console.log(errArray)
} else {
Modal.alert('日期和url通过校验')
}
}
}
}
</script>

<style scoped>
.demo-form {
width: 380px;
}
</style>
13 changes: 12 additions & 1 deletion examples/sites/demos/app/form/webdoc/form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,17 @@ export default {
},
'codeFiles': ['form-validation.vue']
},
{
'demoId': 'form-validate-field',
'name': { 'zh-CN': '特定表单项校验', 'en-US': 'Form field Validation' },
'desc': {
'zh-CN':
"<p>用于校验表单中一个或多个特定表单项。</p>\n",
'en-US':
'<p>Validate one or several formItems of the form</p>\n'
},
'codeFiles': ['form-validate-field.vue']
},
{
'demoId': 'custom-validation-rule',
'name': { 'zh-CN': '自定义校验规则', 'en-US': 'Customized Verification Rule' },
Expand Down Expand Up @@ -390,7 +401,7 @@ export default {
'type': '',
'defaultValue': '',
'desc': { 'zh-CN': '对部分表单字段进行校验的方法', 'en-US': 'Method for verifying some fields in a form' },
'demoId': 'form-validation'
'demoId': 'form-validate-field'
},
{
'name': 'resetFields',
Expand Down