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

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

相关推荐
I_Am_Me_16 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ26 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z31 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴35 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple1 小时前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript