elmentui rules验证
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学习之路发布,如需转载请注明出处。