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();
    }
  }
}

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

相关推荐
J总裁的小芒果6 分钟前
el-table 自定义列、自定义数据
前端·javascript·vue.js
工呈士22 分钟前
CSS in JS:机遇与挑战的思考
javascript·css
至尊童24 分钟前
五个JavaScript 应用技巧
javascript
举个栗子dhy28 分钟前
编辑器、代码块、大模型AI对话中代码复制功能实现
javascript
hyyyyy!29 分钟前
《从分遗产说起:JS 原型与继承详解》
前端·javascript·原型模式
六边形66632 分钟前
一文搞懂JavaScript 与 BOM、DOM、ECMAScript、Node.js的用处
前端·javascript·面试
Mars狐狸37 分钟前
你踩过console.log的坑吗?从performace说起
前端·javascript
学习机器不会机器学习2 小时前
深入浅出JavaScript常见设计模式:从原理到实战(2)
开发语言·javascript·设计模式
富能量爆棚2 小时前
如何搭建spark yarn 模式的集群
大数据·javascript·spark
林太白3 小时前
NestJS用户模块CRUD和分页实现
前端·javascript·nestjs