IView的Select控制value为数字类型时表单验证无法通过?

如题:当i-select放在i-form中并设置了validate时,如果这时i-option的value为数字类型,则表单验证无法通过,明明选择了却无法通过?

JSFiddle调试地址:https://jsfiddle.net/jd2fdt81/

clipboard.png

HTML代码

<div id="app">
    <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <form-item label="城市" prop="city">
            <i-select v-model="formValidate.city" placeholder="请选择所在地">
                <i-option  v-for="item in cityList" :value="item.value" :key="item.value">{{item.label}}</i-option>
            </i-select>
        </form-item>
      
        <form-item>
            <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
            <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
        </form-item>
    </i-form>
</div>

JS代码:

var Main = {
        data () {
            return {
             cityList: [
                    {
                        value: 1,
                        label: '北京市'
                    },
                    {
                        value: 2,
                        label: '上海市'
                    }
                 ],
                formValidate: {
                    city: 1
                },
                ruleValidate: {
                    city: [
                        { required: true, message: '请选择城市', trigger: 'change' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('提交成功!');
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
    }

var Component = Vue.extend(Main)
new Component().$mount('#app')
阅读 9.3k
1 个回答
 ruleValidate: {
   city: [
          {
            type:'number', // 添加验证类型
            required: true, message: '请选择城市', trigger: 'change' 
          }
    ]
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题