element [Bug Report] Form validation rule is invalid

fkvaft9z  于 2022-10-20  发布在  其他
关注(0)|答案(3)|浏览(197)

Element UI version

2.13.0

OS/Browsers version

Win10 / Microsoft Edge 42.17134.1.0

Vue version

2.6.10

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.
j2cgzkjk

j2cgzkjk1#

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?

x6h2sr28

x6h2sr282#

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.

相关问题