[Bug Report] Form validation rule is invalid

[zero-cao]

Element UI version

2.13.0

OS/Browsers version

Win10 / Microsoft Edge 42.17134.1.0

Vue version

2.6.10

Reproduction Link

https://codepen.io/zero-cao/pen/VwYByjd

Steps to reproduce

1. setup VUE/CLI project

2. Go to VUE component section HTML 2.1. Create an el-form with property [:rules="validate"] 2.2. Assign property [prop="commonNname"] the an el-form-item which is validated

3. Go to VUE component section JS 3.1 Add the below code to VUE property [data () {}] validate: {commonName: [{required: true, message: 'Please input invalid common name', trigger: 'blur'}]} 3.2 something else to do

4. Run the code and test with opening browser

What is Expected?

1. Input "test" in the form item 'Common Name', the go to other item
2. No error message popup, because this item validation rule is 'required', and it has value 'test'.

What is actually happening?

1. Input "test" in the form item 'Common Name', the go to other item
2. The red error message 'Please input invalid common name' will popup.

[shroomsprite]

got the same bug with element ui 2.12.0. Checked that el-form-item's prop has the same value as el-input's v-model. Is this a common bug with el-form?

[mister-zou]

I have the same problem. I'm trying to fix it like this. It's good. <el-form v-if="loaded" :model="basicInfoForm" ref="basicInfoForm" :rules="rules"> If your form data verification involves a network request, use v-if to render the form after the network request ends.

[gfernandez-me]

same here