diff --git a/examples/routers/input.vue b/examples/routers/input.vue index 33004a4d..6f9a01b7 100644 --- a/examples/routers/input.vue +++ b/examples/routers/input.vue @@ -1,16 +1,96 @@ <template> - <div style="width: 200px;margin: 100px;"> - {{ value6 }} - <Input v-model="value5" type="textarea" placeholder="Enter something..."></Input> - <Input v-model="value6" type="textarea" :rows="4" placeholder="Enter something..."></Input> - </div> + <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80"> + <FormItem label="Password" prop="passwd"> + <Input type="password" v-model="formCustom.passwd"></Input> + </FormItem> + <FormItem label="Confirm" prop="passwdCheck"> + <Input type="password" v-model="formCustom.passwdCheck"></Input> + </FormItem> + <FormItem label="Age" prop="age"> + <Input type="text" v-model="formCustom.age" number></Input> + </FormItem> + <FormItem> + <Button type="primary" @click="handleSubmit('formCustom')">Submit</Button> + <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button> + </FormItem> + <br><br> + <Icon class="ivu-load-loop" type="loading" size="30" color="#ff6600" /> + <Icon type="ios-alert" size="30" color="#ff6600" /> + <Icon class="ivu-load-loop" type="ios-sync" size="30" color="#ff6600" /> + </Form> </template> <script> export default { data () { + const validatePass = (rule, value, callback) => { + if (value === '') { + callback(new Error('Please enter your password')); + } else { + if (this.formCustom.passwdCheck !== '') { + // 对第二个密码框单独验证 + this.$refs.formCustom.validateField('passwdCheck'); + } + callback(); + } + }; + const validatePassCheck = (rule, value, callback) => { + if (value === '') { + callback(new Error('Please enter your password again')); + } else if (value !== this.formCustom.passwd) { + callback(new Error('The two input passwords do not match!')); + } else { + callback(); + } + }; + const validateAge = (rule, value, callback) => { + if (!value) { + return callback(new Error('Age cannot be empty')); + } + // 模拟异步验证效果 + setTimeout(() => { + if (!Number.isInteger(value)) { + callback(new Error('Please enter a numeric value')); + } else { + if (value < 18) { + callback(new Error('Must be over 18 years of age')); + } else { + callback(); + } + } + }, 1000); + }; + return { - value5: '', - value6: '' + formCustom: { + passwd: '', + passwdCheck: '', + age: '' + }, + ruleCustom: { + passwd: [ + { validator: validatePass, trigger: 'blur' } + ], + passwdCheck: [ + { validator: validatePassCheck, trigger: 'blur' } + ], + age: [ + { validator: validateAge, trigger: 'blur' } + ] + } + } + }, + methods: { + handleSubmit (name) { + this.$refs[name].validate((valid) => { + if (valid) { + this.$Message.success('Success!'); + } else { + this.$Message.error('Fail!'); + } + }) + }, + handleReset (name) { + this.$refs[name].resetFields(); } } } diff --git a/src/components/input/input.vue b/src/components/input/input.vue index 2ef0b29f..6ee0741c 100644 --- a/src/components/input/input.vue +++ b/src/components/input/input.vue @@ -2,10 +2,10 @@ <div :class="wrapClasses"> <template v-if="type !== 'textarea'"> <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div> - <i class="ivu-icon" :class="['ivu-icon-ios-close', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue" @click="handleClear"></i> + <i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue" @click="handleClear"></i> <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i> <transition name="fade"> - <i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i> + <i class="ivu-icon ivu-icon-ios-sync ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i> </transition> <input :id="elementId"