uView/u--form/u-form-item/u--input必填项显示红色星*号/表单校验带红色星*号
1.无校验,仅添加红色星*号
在需要校验的u-form-item上添加required属性即可,搭配u–form的:labelWidth控制长度,我这里是无label值的,如下方图片
<u--form labelPosition="left" :labelWidth="1">
<u-form-item borderBottom required>
<u--input prefixIcon="home-fill" v-model="datainfo.derName" placeholder="单位名称" border="none"></u--input>
</u-form-item>
<u-form-item borderBottom required>
<u--input prefixIcon="account-fill" v-model="datainfo.derContacts" placeholder="联系人" border="none"></u--input>
</u-form-item>
</u--form>
2.加表单校验
①注意u–form添加ref、rules属性;注意u-form-item添加prop属性
<u--form ref="datainfoRef" :model="datainfo" :rules="rules" labelPosition="left" :labelWidth="1">
<u-form-item prop="derName" borderBottom required>
<u--input prefixIcon="home-fill" v-model="datainfo.derName" placeholder="单位名称" border="none"></u--input>
</u-form-item>
<u-form-item prop="derContacts" borderBottom required>
<u--input prefixIcon="account-fill" v-model="datainfo.derContacts" placeholder="联系人" border="none"></u--input>
</u-form-item>
</u--form>
②设置rules校验规则,注意表单项的prop属性值和rules中的属性名对应,否则validate无法触发
<script>
export default {
data() {
return {
rules:{
derName:[{
type: 'string',
required: true,
message: '请填写单位名称',
trigger: ['blur', 'change']
}],
derContacts:[{
type: 'string',
required: true,
message: '请填写联系人',
trigger: ['blur', 'change']
}]
},
}
},
}
</script>
③validate校验方法
this.$refs.datainfoRef.validate().then(validate => {
uni.showToast({
title: "校验成功",
icon: "none"
})
}).catch(errors => {
uni.showToast({
title: "校验失败",
icon: "none"
})
})
以上是本文全部内容,感谢查看!
欢迎参考,感谢指正!