时间:2021-05-26
首先说一下 我在form表单里面遇见的坑:
1.例如我要给后台传的不是对象,而是一个数组,怎么写验证?
2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且一定要与当前弹框的确定或者保存按钮一一对应,例如:第一个弹框的ref='number',按钮的click比如为xxxxxx('number'),第二个弹出框的ref=‘number2',对应的按钮>>xxxxxx('number2')。如果ref用的都一样,就会出现,点击下一步我没有去做验证,我再点击上一步,再点击下一步,控制台就会报错!
官网给的列子是在<el-form>里面进行验证,(当然也可以不用再标签里面进行验证,这里我重要说在标签里!!!),标签上要绑定一个对象(例,:model='numberValidateForm'),注意:model绑定的必须是一个对象,如果是一个数组怎么办呢?这个下面再说,ref="numberValidateForm" 是什么呢,我要对表单进行验证,当然少不了确定或者保存按钮,名字需要和按钮一一对应,这样才能实现 点击保存的时候去验证输入框,上图!
好,接下来就要我们解决上面说的数组的问题了,如果我要传给后台的是一个数组,不是对象,我要怎么去做验证呢?直接上代码。
let flag = true; if (this.$refs[formName] instanceof Array && this.$refs[formName].length > 0) { this.$refs[formName].forEach((obj, index) => { obj.validate((valid) => { if (valid) { console.log('验证成功!'); } else { console.log('error submit!!'); flag = false; return false; } }); }); if (flag) { this.secondDialog = false; this.thirdDialog = true; } }当然,你要是觉得麻烦,也可以用JQ的方法去做验证,这样简单一点:(判断输入框paramName 是否为空,如果为空,显示错误提示信息,否则不显示)
let flag = true; this.requestParamsList.map((data, index) => { if (data.paramName == "") { $(".jqueryValidate").eq(index).show(); flag = false; } });最终效果图如下:
总结
以上所述是小编给大家介绍的Vue ElementUI之Form表单验证遇到的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前面跟大家提到过elementUI验证的问题,那么今天就来看看点击对话框和关闭按钮怎么清空验证,清空form表单,避免二次点击还会有验证错误的提示1、首先在你的
form提交时隐藏input发生的错误问题描述在form表单提交的时候,有些input标签被隐藏,表单验证过程中会出现Aninvalidformcontrolw
Vue项目遇到要表单验证了吧,对我来说表单验证是个很纠(dan)结(teng)的内容,各种判断凌乱到飞起。往常使用jquery的validate插件做表单验证方
用layui表单自定义验证,ajax查询后台验证,form.verify和ajax组合时,尝试更改了几次方案,遇到的问题:1.有时点击两次submit才会提示验
Form表单验证:js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等。完整代码如下:form-lpbbo