vue.js - iview自定义验证会执行两次是怎么回事？

问题描述

问 题

<div id="yanzheng">
    <i-form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
        <Form-item label="年龄" prop="age">
            <i-input type="text" v-model="formCustom.age" number></i-input>
        </Form-item>
        <Form-item>
            <i-button type="primary" @click="handleSubmit('formCustom')">提交</i-button>
            <i-button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</i-button>
        </Form-item>
    </i-form>
</div>

var validateAge=function(rule, value, callback){
    console.log(1);
    if (!value) {
        return callback(new Error('年龄不能为空'));
    }else if(value < 18){
        return callback(new Error('您还未成年'));
    }else{
        callback();
    }
};
var yanzheng=new Vue({
    el:'#yanzheng',
    data:{
        formCustom: {
            passwd: '',
            passwdCheck: '',
            age: ''
        },
        ruleCustom: {
            age: [
                { validator: validateAge, trigger: 'blur' }
            ]
        }
    },
    methods:{
        handleSubmit:function(name) {
            var that=this;
            this.$refs[name].validate(function(valid){
                if (valid) {
                    that.$Message.success('提交成功!');
                } else {
                    that.$Message.error('表单验证失败!');
                }
            });
        },
        handleReset:function(name) {
            this.$refs[name].resetFields();
        }
    }
});

前台输入不符合规范的数值之后控制台会打印两个1是怎么回事呢？

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

我想你的问题应该是，input的验证方式是blur，而你输入一个错误数字以后，直接去点了提交按钮，这时候既触发了blur事件，也触发了整个表单的验证事件，所以会有两次，其实无碍

这篇关于vue.js - iview自定义验证会执行两次是怎么回事？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！