使用iview中的From组件时,如果需要的表单项目为必填项,通常可以使用直接添加required或者在rules中添加required的方式来使其检验为必填项。
iview文档网址:
http://v4.iviewui.com/docs/introduce
iview文档
1.方法一:直接添加required
<template>
<Form ref="form" :model="form" :rules="rule">
<FormItem prop="user" required>
<Input type="text" v-model="form.user" placeholder="Username"></Input>
</FormItem>
</Form>
</template>
<script>
export default {
data () {
return {
form: {
user: ''
},
}
}
}
</script>
此时不填写的校验信息为:user is required
2.方法二:在rules中添加required
<template>
<Form ref="form" :model="form" :rules="rule">
<FormItem prop="user">
<Input type="text" v-model="form.user" placeholder="Username"></Input>
</FormItem>
</Form>
</template>
<script>
export default {
data () {
return {
form: {
user: ''
},
ruleInline: {
user: [
{ required: true, message: 'Please fill in the user name', trigger: 'blur' }
],
}
}
},
methods: {
}
}
</script>
此时不填写的校验信息为:Please fill in the user name
但注意两个方式不要同时使用,即如果设置了rules规则就不要再在FormItem上添加required,不然可能导致:
1.设置的trigger不触发,不能自动校验,验证不刷新
或者
2.不显示预期校验信息,而显示默认校验信息 xxx is required ,
等问题。具体原因不详,欢迎大佬指点。