首页 > 其他分享 >Element el-form 表单校验,保存或提交验证某一项或者多项;validateField 的使用

Element el-form 表单校验,保存或提交验证某一项或者多项;validateField 的使用

时间:2024-08-06 17:24:39浏览次数:19  
标签:el hasError form 必填 校验 表单 validateField

通常新增或者编辑对form表单的校验都是全局性的校验:

this.$refs.form.validate( valid => {
    if (valid) {
        // 校验通过,业务逻辑代码...
    }
});

如果需要对表单里的特定几个必填项进行校验,应该如何实现? 

业务场景:下图点击保存按钮时,只需要校验前两项,其余参数不做校验,保存为草稿;点击提交按钮时,表单里面所有的必填项需要校验。

Element-ui 官网文档截图:

 

 validateField 这个方法接受两个参数,第一参数为数组或者字符串,第二个参数为回调函数

 

// 点击保存、提交
toSubmit(type) {
    let valiList = type === 'save' ? ['projectName', 'projectCode'] : ['projectName', 'projectCode', 'projectType']
    let hasError = false;
    this.$refs.ruleForm.validateField(['ip', 'port', 'user', 'pwd'], err => {
        if (err) {
            hasError = true;
            this.$message.warning('请检查必填项是否填写完整/正确')
            return false;
        }
    });
    if (!hasError) {
        // 校验通过,todo...
    }
}

如果要校验某一项,第一个参数传字符串就可以了。 

tips:

我们也可以动态更改rules规则里面的required字段,但这样点击保存时页面上的必填校验  *  会消失,用户体验会非常不友好。其实还有很多方式可以实现,可以评论区探讨一下~

标签:el,hasError,form,必填,校验,表单,validateField
From: https://blog.csdn.net/qq_36020334/article/details/140960474

相关文章

  • 【编程语言】Delphi使用教程
    目录一、概述二、Delphi的开发环境三、Delphi基本功能3.1创建新项目3.2设计表单3.3编写代码3.4编译和运行3.5调试四、Delphi的高级的概念和技巧4.1使用组件和类4.2数据库操作4.3图形和多媒体4.4网络编程4.5调试和优化4.6 部署和分发4.7版本控制和......
  • java中对ecel表的读取写入
    1.依赖<dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>3.16</version></dependency><dependency><......
  • Mac开发基础11-NSTextField(一)
    NSTextField是macOS应用中常用的UI元素之一,它用于显示和输入文本。NSTextField提供了丰富的API来定制和处理用户输入。常见API和技巧1.初始化NSTextField程序化创建Objective-CNSTextField*textField=[[NSTextFieldalloc]initWithFrame:NSMakeRect(0,0,20......
  • Mac开发基础12-NSTextField(二)
    NSTextField是一个功能强大的控件,不仅可以作为简单的文本输入框,还可以实现更多高级功能。例如,支持富文本、实现自定义绘制、处理复杂的输入校验等。进阶使用和技巧1.富文本显示与编辑NSTextField支持富文本,也就是说你可以为文本设置不同的颜色、字体、大小等。设置富文本O......
  • 如何捕获来自 Chem.MolFromSmiles('Formula') 的错误消息
    我是这个rdkit的新手,下面是我用来从公式获取化学图像的代码,fromrdkitimportChemm=Chem.MolFromSmiles('OCC1OC(C(C(C1O)O)O)[C]1(C)(CO)CC(=O)C=C(C1CCC(=O)C)C')m如果代码正确,它会显示结构。上面的代码显示错误说"[15:23:55]Explicitvalenceforatom#11C......
  • Java使用POI导出excel记录
    eg:@OverridepublicvoidexportExcel(HttpServletResponseresponse)throwsException{//创建Excel文档XSSFWorkbookworkbook=newXSSFWorkbook();XSSFSheetsheet=workbook.createSheet("设备厂商");//创建表头XSSFRow......
  • 我正在 python 中使用 aspose.pdf 将 pdf 转换为 excel 。但问题是它只能将 pdf 的前
    `从tkinter导入*将aspose.pdf导入为ap从tkinter导入文件对话框importpandasaspdinput_pdf=filedialog.askopenfilename(filetypes=(("PDF文件",".pdf"),("所有文件",".")))output_file=filedialog.asksaveasfil......
  • 如何在selenium python中访问电子邮件中的所有文件夹
    我使用imaplib库,但有时无法访问某些帐户,我使用poplib但它只支持访问主邮箱,但不支持访问其他文件夹,如垃圾邮件我想使用imaplib,但不会出现有时甚至无法访问的错误尽管我有一个帐户,但我仍然可以访问它,或者是否有另一个库可以快速支持该帐户?你想要使用Selenium和Python......
  • sentinel管理后台
    在上文中,我们学习了如何在应用中集成sentinel,并定义资源,但我们仍需要为资源定义规则。在应用日常运行过程中,当发现资源需要被限流,在项目中通过代码定义规则、验证、发布,这个过程费时费力,亟需一种更加便捷的运维工具。sentinel中提供了单独部署的控制台应用:sentineldash......
  • 借助 Transformer 实现美股价格的预测(Python干货)
    作者:老余捞鱼原创不易,转载请标明出处及原作者。写在前面的话:      Transformer是一种在自然语言处理等领域广泛应用的深度学习架构,与传统的循环神经网络(RNN)相比,Transformer可以并行处理输入序列的各个位置,大大提高了计算效率。而且通过多层的深度堆叠,能够学习......