element el-form 表单单个验证和整体验证

表单单个验证

HTML
在这里插入图片描述

单独验证方法(及放的位置)
在这里插入图片描述

ref 对应的位置
在这里插入图片描述

 //只有一项的时候
  
      this.$refs["CODE_Rules"].validateField("CODE_TYPE",(errMsg) => {
                if (!errMsg) {
                    this.$message.success("條件一成功了!")

                } else {

                    console.log('error submit!!');
                    return false;
                }
                
            });


//多项单独验证
 /** 这中验证是会单独每项去验证,也就是这个每判断成功一次就会进入执行一次, */
 this.$refs["CODE_Rules"].validateField(["CODE_TYPE","CODE_TYPE2"], (errMsg) => {
       if (!errMsg) {
           this.$message.success("條件一成功了!")

       } else {

           console.log('error submit!!');
           return false;
       }

   });

表单验证(和官方的一样)

 this.$refs[formName].validate((valid) => {
       if (valid) {
           this.$message.success("條件一成功了!")

       } else {

           console.log('error submit!!');
           return false;
       }
   });

如有问题,评论区告知

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui的el-form中控制单个el-form-item的label对齐方式,可以使用label-align属性。该属性可以设置label的对齐方式,包括左对齐("left")、右对齐("right")和居中对齐("center")。通过设置该属性,你可以单独控制el-form-item的label的对齐方式,而不影响整个表单的label的位置。例如,你可以在el-form-item上添加label-align="left"来将label左对齐。 如果你想要自定义el-form-item的label的宽度,可以使用label-width属性。你可以将label-width设置为具体的宽度值,也可以设置为"auto"来根据label的内容自动调整宽度。然而,需要注意的是,使用label-width来设置宽度可能会导致校验提示错位。如果你想要单独控制校验提示的位置,可以通过修改el-form-item的样式来实现。例如,你可以给el-form-item添加自定义的类名,然后在样式中使用该类名来控制label的对齐方式,如下所示: .group-item-vo { display: flex; justify-content: flex-start; padding-bottom: 14px; span { margin-right: 20px; } } 通过以上方法,你可以单独控制el-form-item的label对齐方式,并且根据需要自定义校验提示的位置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [单个el-form-item中有多个必填](https://blog.csdn.net/weixin_43691818/article/details/121428871)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [如何解决单个el-formel-form-item文字左对齐](https://blog.csdn.net/qq_43474235/article/details/127480583)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值