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

elmentui rules验证

自由小鸟3年前 (2022-07-28)elementui1252
 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...

elementui 整个form禁止,但是除一些不禁止

在除外的外层添加一个el-form <el-form label-width="100px" :model="form" :disabled="true"> <el-form-item label="...

上传组件 el-upload

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

el-table 里金额千分位符,保留两位小数

<el-table-column prop="amountRec" :formatter="rbstateFormat" label="金额" min-width="150" ></el-table-c...

公用方法

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