form表单中input框以及select下拉框校验问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了form表单中input框以及select下拉框校验问题相关的知识,希望对你有一定的参考价值。
参考技术A (1):model="ruleForm" 绑定的ruleForm值是否挂载成功并且操作的是否是这个表单。(2):rules="rules" 校验的规则格式绑定的rules是否定义并且格式正确为对象数组。
(3)el-form-item中的prop="name"是否和rules中的name: [ required: true, message: '请输入活动名称', trigger: 'blur' , ], 的名称一致,两个name是相同的,element的校验就是根据这个prop找对应的输入框的。
(4)<el-input v-model="ruleForm.name"></el-input> 的v-model="ruleForm.name"确保对象ruleForm中有name这个属性!
关于表单校验的大部分bug的原因就是这四步绑定的值有问题,完全都是细心问题!!!
———————————————————————————————————————————————
问题:明明输入框中输入了文字,却提示未输入
解决办法:input框中,trigger事件换成blur
trigger事件换成change
一般出现这问问题,都是校验问题,先看字段名有没有一致,再看trigger有没有正确
layui下拉选择框select不显示
弹层layer下拉框没有样式_不可点击_没有效果_渲染失效的解决办法
一、必须给表单体系所在的父元素加上 class="layui-form"
在一个容器中设定 class="layui-form" 来标识一个表单元素块,如果你不想用 form,你可以换成 div 等任何一个普通元素;记得要在 外层容器 中定义 class="layui-form",form 模块才能正常工作。
当你使用表单时,layui 会对 select、checkbox、radio 等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于 form 组件,所以你必须加载 form,并且执行一个实例;
三、更新渲染
有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然 layui 不支持双向绑定机制,但没有关系,你只需要执行 form.render(type, filter); 方法即可。
第一个参数:type,为表单的 type 类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表:
参数(type)值 | 描述 |
---|---|
select | 刷新select选择框渲染 |
checkbox | 刷新checkbox复选框(含开关)渲染 |
radio | 刷新radio单选框框渲染 |
以上是关于form表单中input框以及select下拉框校验问题的主要内容,如果未能解决你的问题,请参考以下文章
[HTML]表单标签(form表单域input输入表单label标签select下拉表单textarea文本域)