iview2+ 表单密码验证

<Form :model="formItem" v-model="formItem.id" ref="formItem" :label-width="80" :rules="validateRules">
  <FormItem label="新密码" prop="password">
       <Input v-model="formItem.password" type="password"/>
  </FormItem>
  <FormItem label="确认密码" prop="pwdCheck">
       <Input v-model="formItem.pwdCheck" type="password"/>
  </FormItem>
</Form>
 
export default {
    name: 'demo',
    data() {
        const pwdValidate = (rule, value, callback) => {
            this.$refs.formItem.validateField('pwdCheck');
            callback();
        };
        const pwdCheckValidate = (rule, value, callback) => {
            if (this.formItem.password != '' && value == '') {
                callback(new Error('确认密码不能为空'));
            } else if (this.formItem.password != value) {
                callback(new Error('新密码和确认密码应相同'));
            } else {
                callback();
            }
        };
        return {
            validateRules: {
                password: [
                    {required: false, validator: pwdValidate, trigger: 'blur'}
                ],
                pwdCheck: [
                    {required: false, validator: pwdCheckValidate, trigger: 'blur'}
               ]
            }
       }  
    } 
}

  

posted @ 2019-09-05 17:01  前端王者(法师)  阅读(1153)  评论(0编辑  收藏  举报