当前位置:首页 > elementui > 正文内容

elmentui rules验证

自由小鸟3年前 (2022-07-28)elementui1457
 totalAmount12: [
          { required: true, message: "请输入借款金额", trigger: "blur" },
          { pattern: /^(\d+)(.\d{1,50})?$/, message: "输入阿拉伯数字或小数" },
          { required: true, validator: validateTags, trigger: "blur" },
        ],


        data() {
    const validateTags = (rule, value, callback) => {
      console.log("ludan===", value);
      if (value > this.shutotalMoney) {
        return callback(new Error("借款金额不能于于总金额"));
      } else {
        callback();
      }
    };
    return {}
    }




以下是集合的验证代码比较粗简单记录一下

<div
            :class="index > 0 ? 'borderClass' : ''"
            v-for="(itemData, index) in ruleForm.ApplicationFeeDetails"
            :key="index"
          >
            <el-row>
              <el-col :span="8">
                <el-badge
                  :value="itemData.orderNo ? itemData.orderNo : index + 1"
                  class="item"
                  type="primary"
                >
                  <el-form-item
                    label="费用类型"
                    :rules="{
                      required: true,
                      message: '请输入费用类型',
                      trigger: 'change',
                    }"
                    :prop="'ApplicationFeeDetails[' + index + '].feeType'"
                  >
                    <div></div>
                    <el-select
                      class="newWidth"
                      v-model="itemData.feeType"
                      filterable
                      placeholder="请选择费用类型"
                    >
                      <el-option
                        v-for="item in feeTypeOptions"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-badge>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="费用金额(元)"
                  :rules="{
                    required: true,
                    pattern: /^(\d+)(.\d{1,50})?$/,
                    message: '请输入费用金额',
                    trigger: 'change',
                  }"
                  :prop="'ApplicationFeeDetails[' + index + '].amount'"
                >
                  <el-input
                    v-model="itemData.amount"
                    maxlength="50"
                    placeholder="请输入输入阿拉伯数字或小数"
                    class="newWidth"
                    @input="shutotalMoneyFn"
                  ></el-input>
                  <el-link
                    v-if="
                      ruleForm.ApplicationFeeDetails.length > 1 &&
                      !(showRecord || item.typeDetail)
                    "
                    type="primary"
                    :underline="false"
                    style="margin-left: 10px"
                    @click="deleteApplicationFeeDetailsFn(index)"
                  >
                    删除</el-link
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </div>

版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=143

“elmentui rules验证” 的相关文章

elementui -动态循环验证

<el-col :span="9"> <el-form-item label="消费总人数" :rules="[{required: true,pattern: /^(\d+)(.\d{0...

上传组件 el-upload

<el-upload :on-success="uploadSuccess" :on-error="handleErr"...

公用方法

1,deepClone 深度拷贝方法2,deepMerge 合并对象3,oninput 金额只能是数字保留2位小数 <el-input @keyup.native=” ruleForm.totalAmount = oninput(...

elementui-plus 使用注意点

1,在使用图标注意点,如果使用动态图标需要全局注册图标,不然不会出现 import { createApp } from 'vue' import App from './App.vue' import router from './router'...

elementui 使用el-select 注意点

//注意 value 值是可以自己去组装的,这样的场景是在提交数据时可能一个字段不能满意,需要整条数据里的2到多个可以用这种拼接的方式,在使用方法处需要结构出来每个字段来拼接到form整个数据里 注意在编辑回显的地方也需要注意整个form对象数据里是否有这几个拼接的数据,如果没有需要单独再拼接上去...