Commit a358e0c717825c917e2299892fc14990c0a95f25
1 parent
d061790f
fixed #1171
Showing
3 changed files
with
90 additions
and
25 deletions
Show diff stats
examples/routers/form.vue
| 1 | 1 | <template> |
| 2 | - <div style="width: 300px;"> | |
| 3 | - <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> | |
| 4 | - <Form-item label="爱好" prop="interest"> | |
| 5 | - <Input v-model="formValidate.interest" number></Input> | |
| 6 | - </Form-item> | |
| 7 | - <Form-item> | |
| 8 | - <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button> | |
| 9 | - <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button> | |
| 10 | - </Form-item> | |
| 11 | - </i-form> | |
| 12 | - </div> | |
| 2 | + <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> | |
| 3 | + <Form-item label="姓名" prop="name"> | |
| 4 | + <Input v-model="formValidate.name" placeholder="请输入姓名"></Input> | |
| 5 | + </Form-item> | |
| 6 | + <Form-item label="邮箱" prop="mail"> | |
| 7 | + <Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input> | |
| 8 | + </Form-item> | |
| 9 | + <Form-item label="城市" prop="city"> | |
| 10 | + <Select v-model="formValidate.city" placeholder="请选择所在地"> | |
| 11 | + <Option value="beijing">北京市</Option> | |
| 12 | + <Option value="shanghai">上海市</Option> | |
| 13 | + <Option value="shenzhen">深圳市</Option> | |
| 14 | + </Select> | |
| 15 | + </Form-item> | |
| 16 | + <Form-item label="选择日期"> | |
| 17 | + <Row> | |
| 18 | + <Col span="11"> | |
| 19 | + <Form-item prop="date"> | |
| 20 | + <Date-picker type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker> | |
| 21 | + </Form-item> | |
| 22 | + </Col> | |
| 23 | + <Col span="2" style="text-align: center">-</Col> | |
| 24 | + <Col span="11"> | |
| 25 | + <Form-item prop="time"> | |
| 26 | + <Time-picker type="time" placeholder="选择时间" v-model="formValidate.time"></Time-picker> | |
| 27 | + </Form-item> | |
| 28 | + </Col> | |
| 29 | + </Row> | |
| 30 | + </Form-item> | |
| 31 | + <Form-item label="性别" prop="gender"> | |
| 32 | + <Radio-group v-model="formValidate.gender"> | |
| 33 | + <Radio label="male">男</Radio> | |
| 34 | + <Radio label="female">女</Radio> | |
| 35 | + </Radio-group> | |
| 36 | + </Form-item> | |
| 37 | + <Form-item label="爱好" prop="interest"> | |
| 38 | + <Checkbox-group v-model="formValidate.interest"> | |
| 39 | + <Checkbox label="吃饭"></Checkbox> | |
| 40 | + <Checkbox label="睡觉"></Checkbox> | |
| 41 | + <Checkbox label="跑步"></Checkbox> | |
| 42 | + <Checkbox label="看电影"></Checkbox> | |
| 43 | + </Checkbox-group> | |
| 44 | + </Form-item> | |
| 45 | + <Form-item label="介绍" prop="desc"> | |
| 46 | + <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input> | |
| 47 | + </Form-item> | |
| 48 | + <Form-item> | |
| 49 | + <Button type="primary" @click="handleSubmit('formValidate')">提交</Button> | |
| 50 | + <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> | |
| 51 | + </Form-item> | |
| 52 | + </Form> | |
| 13 | 53 | </template> |
| 14 | 54 | <script> |
| 15 | 55 | export default { |
| 16 | 56 | data () { |
| 17 | 57 | return { |
| 18 | 58 | formValidate: { |
| 19 | - interest: '' | |
| 59 | + name: '', | |
| 60 | + mail: '', | |
| 61 | + city: '', | |
| 62 | + gender: '', | |
| 63 | + interest: [], | |
| 64 | + date: '', | |
| 65 | + time: '', | |
| 66 | + desc: '' | |
| 20 | 67 | }, |
| 21 | 68 | ruleValidate: { |
| 69 | + name: [ | |
| 70 | + { required: true, message: '姓名不能为空', trigger: 'blur' } | |
| 71 | + ], | |
| 72 | + mail: [ | |
| 73 | + { required: true, message: '邮箱不能为空', trigger: 'blur' }, | |
| 74 | + { type: 'email', message: '邮箱格式不正确', trigger: 'blur' } | |
| 75 | + ], | |
| 76 | + city: [ | |
| 77 | + { required: true, message: '请选择城市', trigger: 'change' } | |
| 78 | + ], | |
| 79 | + gender: [ | |
| 80 | + { required: true, message: '请选择性别', trigger: 'change' } | |
| 81 | + ], | |
| 22 | 82 | interest: [ |
| 23 | - { | |
| 24 | - required: true, | |
| 25 | - type: 'number', | |
| 26 | - trigger: 'change' | |
| 27 | - } | |
| 83 | + { required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' }, | |
| 84 | + { type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' } | |
| 85 | + ], | |
| 86 | + date: [ | |
| 87 | + { required: true, type: 'date', message: '请选择日期', trigger: 'change' } | |
| 88 | + ], | |
| 89 | + time: [ | |
| 90 | + { required: true, type: 'date', message: '请选择时间', trigger: 'change' } | |
| 91 | + ], | |
| 92 | + desc: [ | |
| 93 | + { required: true, message: '请输入个人介绍', trigger: 'blur' }, | |
| 94 | + { type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' } | |
| 28 | 95 | ] |
| 29 | 96 | } |
| 30 | 97 | } | ... | ... |
package-lock.json
| 1 | 1 | { |
| 2 | 2 | "name": "iview", |
| 3 | - "version": "2.0.0-rc.16", | |
| 3 | + "version": "2.0.0-rc.17", | |
| 4 | 4 | "lockfileVersion": 1, |
| 5 | 5 | "dependencies": { |
| 6 | 6 | "async-validator": { |
| 7 | - "version": "1.6.8", | |
| 8 | - "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.6.8.tgz", | |
| 9 | - "integrity": "sha1-+6qpACtBBm/fO6IdikyosRea02s=" | |
| 7 | + "version": "1.7.1", | |
| 8 | + "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.7.1.tgz", | |
| 9 | + "integrity": "sha1-idPXo4TKXQXg8Hv1F1TVkeLP7GE=" | |
| 10 | 10 | }, |
| 11 | 11 | "autoprefixer-loader": { |
| 12 | 12 | "version": "2.1.0", |
| ... | ... | @@ -2960,13 +2960,11 @@ |
| 2960 | 2960 | "version": "6.23.0", |
| 2961 | 2961 | "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.23.0.tgz", |
| 2962 | 2962 | "integrity": "sha1-CpSJ8UTecO+zzkMArM2zKeL8VDs=", |
| 2963 | - "dev": true, | |
| 2964 | 2963 | "dependencies": { |
| 2965 | 2964 | "regenerator-runtime": { |
| 2966 | 2965 | "version": "0.10.3", |
| 2967 | 2966 | "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.3.tgz", |
| 2968 | - "integrity": "sha1-jENnqQS1HqYqkIrDEL+Z/5CoKj4=", | |
| 2969 | - "dev": true | |
| 2967 | + "integrity": "sha1-jENnqQS1HqYqkIrDEL+Z/5CoKj4=" | |
| 2970 | 2968 | } |
| 2971 | 2969 | } |
| 2972 | 2970 | }, | ... | ... |
package.json