Vue+Element给表单设置多个验证+规则Rules自定义

注意:

1、<el-form >的:rules="Rules" 这个Rules名字需要对应

2、<el-form-item>的prop="quantity"这个prop名字需要对应好

html 复制代码
<el-dialog :title="title" v-dialogDrag :visible.sync="BoundOpen">
<el-form ref="Form" :model="Form" :rules="Rules" label-width="80px">
  <el-form-item label="数量" prop="quantity">
    <el-input v-model="quantity" placeholder="请输入数量"/>
  </el-form-item>

</el-form>
<div slot="footer" class="dialog-footer">
  <el-button type="primary" @click="Bound">确 定</el-button>
  <el-button @click="cancelBound">取 消</el-button>
</div>
</el-dialog>

方法一:

javascript 复制代码
Rules: {
  quantity: [
    {required: true, message: "添加数量不能为空", trigger: "blur"},
    {digits: true, message: "必须输入整数", trigger: "blur"},
    {range: [1, 100], message: "输入数量超出范围", trigger: "blur"},
  ],
    }

方法二:

javascript 复制代码
Rules: {
  quantity: [
    {validator: checkQuantity, trigger: 'blur'}
  ],
},
javascript 复制代码
data() {
  const checkQuantity = (rule, value, callback) => {
    if (this.buttonFlag == 'unbind' || this.buttonFlag == 'editNormal') {
      if (value == null || value == '') {
        callback(new Error('请输入数量'));
      } else if (!/^\d+(\.\d+)?$/.test(value)) {
        callback(new Error('请输入合法的数字'));
      }else if (value == 0) {
        callback(new Error('数量不能为0'));
      } else {
        callback();
      }
    } else {
      callback();
    }
  }
}

可以结合正则表达式使用~

相关推荐
理想不理想v1 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云11 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x2 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
麦麦大数据3 小时前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j