Commit 05e2dda017b8cef9bc12409ac8f00c7f3e84affe
1 parent
c5625bfd
fixed #768
Showing
2 changed files
with
27 additions
and
66 deletions
Show diff stats
examples/routers/form.vue
| 1 | <template> | 1 | <template> |
| 2 | <div style="width: 300px;"> | 2 | <div style="width: 300px;"> |
| 3 | - <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80"> | ||
| 4 | - <Form-item label="密码" prop="passwd"> | ||
| 5 | - <Input type="password" v-model="formCustom.passwd"></Input> | ||
| 6 | - </Form-item> | ||
| 7 | - <Form-item label="确认密码" prop="passwdCheck"> | ||
| 8 | - <Input type="password" v-model="formCustom.passwdCheck"></Input> | ||
| 9 | - </Form-item> | ||
| 10 | - <Form-item label="年龄" prop="age"> | ||
| 11 | - <Input type="text" v-model="formCustom.age" number></Input> | 3 | + <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> |
| 4 | + <Form-item label="爱好" prop="interest"> | ||
| 5 | + <Checkbox-group v-model="formValidate.interest"> | ||
| 6 | + <Checkbox label="吃饭"></Checkbox> | ||
| 7 | + <Checkbox label="睡觉"></Checkbox> | ||
| 8 | + <Checkbox label="跑步"></Checkbox> | ||
| 9 | + <Checkbox label="看电影"></Checkbox> | ||
| 10 | + </Checkbox-group> | ||
| 12 | </Form-item> | 11 | </Form-item> |
| 13 | <Form-item> | 12 | <Form-item> |
| 14 | - <Button type="primary" @click="handleSubmit('formCustom')">提交</Button> | ||
| 15 | - <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button> | 13 | + <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button> |
| 14 | + <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button> | ||
| 16 | </Form-item> | 15 | </Form-item> |
| 17 | - </Form> | 16 | + </i-form> |
| 18 | </div> | 17 | </div> |
| 19 | </template> | 18 | </template> |
| 20 | <script> | 19 | <script> |
| 21 | export default { | 20 | export default { |
| 22 | data () { | 21 | data () { |
| 23 | - const validatePass = (rule, value, callback) => { | ||
| 24 | - if (value === '') { | ||
| 25 | - callback(new Error('请输入密码')); | ||
| 26 | - } else { | ||
| 27 | - if (this.formCustom.passwdCheck !== '') { | ||
| 28 | - // 对第二个密码框单独验证 | ||
| 29 | - this.$refs.formCustom.validateField('passwdCheck'); | ||
| 30 | - } | ||
| 31 | - callback(); | ||
| 32 | - } | ||
| 33 | - }; | ||
| 34 | - const validatePassCheck = (rule, value, callback) => { | ||
| 35 | - if (value === '') { | ||
| 36 | - callback(new Error('请再次输入密码')); | ||
| 37 | - } else if (value !== this.formCustom.passwd) { | ||
| 38 | - callback(new Error('两次输入密码不一致!')); | ||
| 39 | - } else { | ||
| 40 | - callback(); | ||
| 41 | - } | ||
| 42 | - }; | ||
| 43 | - const validateAge = (rule, value, callback) => { | ||
| 44 | - if (!value) { | ||
| 45 | - return callback(new Error('年龄不能为空')); | ||
| 46 | - } | ||
| 47 | - // 模拟异步验证效果 | ||
| 48 | - setTimeout(() => { | ||
| 49 | - if (!Number.isInteger(value)) { | ||
| 50 | - callback(new Error('请输入数字值')); | ||
| 51 | - } else { | ||
| 52 | - if (value < 18) { | ||
| 53 | - callback(new Error('必须年满18岁')); | ||
| 54 | - } else { | ||
| 55 | - callback(); | ||
| 56 | - } | ||
| 57 | - } | ||
| 58 | - }, 2000); | ||
| 59 | - }; | ||
| 60 | - | ||
| 61 | return { | 22 | return { |
| 62 | - formCustom: { | ||
| 63 | - passwd: '', | ||
| 64 | - passwdCheck: '', | ||
| 65 | - age: '' | 23 | + formValidate: { |
| 24 | + interest: ['吃饭', '跑步'] | ||
| 66 | }, | 25 | }, |
| 67 | - ruleCustom: { | ||
| 68 | - passwd: [ | ||
| 69 | - { validator: validatePass, trigger: 'blur' } | ||
| 70 | - ], | ||
| 71 | - passwdCheck: [ | ||
| 72 | - { validator: validatePassCheck, trigger: 'blur' } | ||
| 73 | - ], | ||
| 74 | - age: [ | ||
| 75 | - { validator: validateAge, trigger: 'blur' } | 26 | + ruleValidate: { |
| 27 | + interest: [ | ||
| 28 | + { required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' }, | ||
| 29 | + { type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' } | ||
| 76 | ] | 30 | ] |
| 77 | } | 31 | } |
| 78 | } | 32 | } |
src/components/form/form-item.vue
| @@ -191,10 +191,17 @@ | @@ -191,10 +191,17 @@ | ||
| 191 | 191 | ||
| 192 | let prop = getPropByPath(model, path); | 192 | let prop = getPropByPath(model, path); |
| 193 | 193 | ||
| 194 | - if (Array.isArray(value) && value.length > 0) { | 194 | +// if (Array.isArray(value) && value.length > 0) { |
| 195 | +// this.validateDisabled = true; | ||
| 196 | +// prop.o[prop.k] = []; | ||
| 197 | +// } else if (value !== this.initialValue) { | ||
| 198 | +// this.validateDisabled = true; | ||
| 199 | +// prop.o[prop.k] = this.initialValue; | ||
| 200 | +// } | ||
| 201 | + if (Array.isArray(value)) { | ||
| 195 | this.validateDisabled = true; | 202 | this.validateDisabled = true; |
| 196 | - prop.o[prop.k] = []; | ||
| 197 | - } else if (value !== this.initialValue) { | 203 | + prop.o[prop.k] = [].concat(this.initialValue); |
| 204 | + } else { | ||
| 198 | this.validateDisabled = true; | 205 | this.validateDisabled = true; |
| 199 | prop.o[prop.k] = this.initialValue; | 206 | prop.o[prop.k] = this.initialValue; |
| 200 | } | 207 | } |