在使用 ivew的时候，我们的iview版本是 3.X， 然后在看搜索文档的时候，习惯性进入到 4.X版本
在使用Form组件做校验，validate() 方法返回的永远是 false,就有问题，而且， 触发规则以后，值即使填写正确，红色警告也不会消失
iview 3写法
<i-form v-ref:form-inline :model="formInline" :rules="ruleInline" inline>
<Form-item prop="user">
<i-input type="text" :value.sync="formInline.user" placeholder="Username">
</i-input>
</Form-item>
<i-form>
<script>
export default {
data() {
return {
formInline: {
user: ''
},
ruleInline: {
user: [
{ required: true, message: '请填写用户名', trigger: 'blur' }
]
}
}
}
</script>
上面的写法是 iview 3.X版本
几个注意的点
- Form-item item 小写
- i-input 使用的是 横线写法，而不是 Input
iview 4写法
<Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
<FormItem prop="user">
<Input type="text" v-model="formInline.user" placeholder="Username">
</Input>
</FormItem>
</Form>
<script>
export default {
data () {
return {
formInline: {
user: ''
},
ruleInline: {
user: [
{ required: true, message: 'Please fill in the user name', trigger: 'blur'}
]
}
}
}
</script>
对比写法上，2个版本是有出入的， 还有 validate校验方法，如果package.json中是 3.x版本的 iview,而写法又是 iview 4.x validate永远返回 false
有些坑，你不踩，怎么知道它不会被踏平😝😝😝
