vue+element动态校验自定义校验规则实时校验
Posted web半晨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue+element动态校验自定义校验规则实时校验相关的知识，希望对你有一定的参考价值。
1、html部分
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态校验</title>
<link rel="stylesheet" href="/node_modules/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-form :model="ruleForm" :rules="rules" label-width="100px">
<el-form-item label="匹配金额" prop="matchingValue">
<el-input style="width: 30%;" disabled v-model="ruleForm.matchingValue"></el-input>
</el-form-item>
<el-form-item label="输入金额" prop="value">
<el-input style="width: 30%;" v-model="ruleForm.value"></el-input>
</el-form-item>
</el-form>
</div>
<script src="/node_modules/vue/dist/vue.js"></script>
<script src="/node_modules/element-ui/lib/index.js"></script>
<script src="./index.js"></script>
</body>
2、javascript部分
new Vue(
el: "#app",
data()
return
ruleForm:
matchingValue: '24.00',
value: null
,
rules:
matchingValue: [ required: false, message: '请输入', trigger: 'blur' ,],
value: [
required: true, message: '请输入', trigger: 'blur' ,
required: true,
validator: (rule, value, callback) =>
console.log(rule, value);
if (Number(value) < Number(this.ruleForm.matchingValue))
return callback(new Error('实收金额大于等于应缴金额'));
callback();
,
trigger: ['change', 'blue'],
,
],
,
);
以上是关于vue+element动态校验自定义校验规则实时校验的主要内容，如果未能解决你的问题，请参考以下文章