element-ui表单校验不能同步结果的问题

这篇具有很好参考价值的文章主要介绍了element-ui表单校验不能同步结果的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

多个表单遍历时,要依次获取各个结果,但是往往拿不到最终结果
let flag=true
this.$refs[‘form’].validate(valid=>{
flag=valid
})
console.log(valid)//永远是true

原因分析:

提示:这里填写问题的分析:
element 表单同步验证返回验证结果,javascript,前端,vue.js,elementui
element文档里描述了,validate方法参数为一个回调函数,如果不传则返回一个promise


解决方案:

我们可以在validate的回调参数里放入想执行的方法,也可以不传入回调参数,利用try catch 和async await 让表单校验结果变为同步
let p=this.$refs[‘form’].validate()
try{
await p
}catch(error){
//此处的error为表单校验失败的字段

}
这样就可以同步进行了文章来源地址https://www.toymoban.com/news/detail-521759.html

到了这里,关于element-ui表单校验不能同步结果的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于Element-UI el-select多选表单校验问题

       在使用 el-select 多选下拉菜单配置表单校验时, 如果form表单绑定的form对象对应属性值为空字符串或者null(其他未尝试),表单中的多选下拉框会立刻执行校验并弹出校验信息,代码如下: 正确方式如下: 将多选下拉框对应的属性值默认值设置未空数组即可

    2024年02月11日
    浏览(32)
  • element-ui form表单,select多选时,初始自动校验问题解决

    使用 el-select 多选框配置表单校验时, 如果绑定值为空字符串,表单中的多选下拉框会自动执行校验并提示红色文字提示,体验非常不好; 原因:form表单-value1默认为空字符串 改为空数组即可解决

    2024年02月13日
    浏览(26)
  • 解决Vue+Element-UI 进行From表单校验时出现了英文提示问题

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 在使用 form 表单时,往往会对表单字段进行校验,字段为必填项时会添加 required 属性,此时自定义 rules 规则时就会需要表单输入框输入数据删除为空时,出现英文校验提示信息 代码如下: 将requ

    2024年02月14日
    浏览(35)
  • element-ui 表单校验・大全

    element-ui 官网 element-ui 表单校验的规则如下:

    2024年02月08日
    浏览(39)
  • element-ui的表单正则校验

    🤯🤯💦💦💦竹怜新雨后,山爱夕阳时, 绵绵细雨, 也许会让嘈杂的窗外焕然一新吧! 基本步骤-共三步 定义验证规则。data()中按格式定义规则 在模板上做属性配置来应用规则(三个配置) 给表单设置 rules 属性传入验证规则 给表单设置model属性传入表单数据 给表单项(

    2023年04月12日
    浏览(30)
  • element-ui表单自定义校验

    1.问题描述 项目开发过程中,遇到表单校验,这次的校验规则比较严,element-ui表单自带的校验完全解决不了问题。 2.解决方法 使用elementui表单校验中的自定义校验,validUsername是自定义的校验方法名称 2.1 定义表单校验: 2.2 自定义校验方法: 注意:方法中一定义要返回call

    2024年02月11日
    浏览(29)
  • element-ui 表单校验 rules 配置

    指示type要使用的验证器。可识别的类型值为: string :类型必须为 string 。 type  默认是  string。 number :类型必须为 number 。 boolean :类型必须为 boolean。 integer :类型必须为  number  且为整数。 float :类型必须为  number  且为浮点数。 array :类型必须为数组。 enum :值必须

    2024年02月04日
    浏览(34)
  • element-ui的form表单校验

    form表单校验基本三步: 1、定义验证规则 在data中定义表单校验规则,一个表单项可定义多条规则,表单项规则用数组,规则为对象,required为必须填写,message为校验提示信息,trigger为校验时机,可选blur和change,分别为失去焦点和数据变化;min/max为最小与最大字符个数,v

    2024年02月11日
    浏览(47)
  • Vue Element-ui表单校验规则

      Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的。   我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则。但我在深入使用表单校验规则时,遇到下列问题: 如何判断属性值是否在某个范围内,且

    2024年02月03日
    浏览(67)
  • element-ui form表单校验 失败的原因

    1、没有在el-form上指定model 2、el-form-item上的prop名称不对,应当与rules中的名称一致; 3、绑定的属性没有在data中声明; 4、特别重要的一点是ruleForm(数据)和rules(校验规则)里面对应的key一定要相同,一个是数据绑定的值 另外一个是值的规则。

    2024年02月11日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包