validator验证器使用注意事项

最新推荐文章于 2024-04-02 06:16:14 发布

Bug爱喝茶

最新推荐文章于 2024-04-02 06:16:14 发布

阅读量637

点赞数 2

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/weixin_57338405/article/details/130977224

版权

validator 中的方法记得 callback()回调

今天在业务需求中，遇到了对于我来说有些复杂的表单规则校验rules，一般的表单校验如下就能满足一些校验需求，但是，有时候会遇到一些比较复杂的校验就需要用到validator验证器，去进行校验，

在element-ui中看到了validator验证器的使用，试着去用一下，结果没有报错，但是提交按钮会没有任何反应，就用最笨的方法去进行一一验证，最后发现还是自己粗心大意了，所以写篇博客记录一下小小日常，

rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ]
        }

接下来说一下validator验证器的使用，代码的话就只上关键性代码了，不能让我整个

哈哈哈哈哈……

<el-form-item label="金额" prop="money">
    <el-input v-model="form.money" placeholder="请输入金额" readonly/>
</el-form-item>
<el-form-item label="数量" prop="spendQty">
   <el-input v-model.number="form.spendQty" placeholder="请输入数量" />
</el-form-item>

 data() {

    // 校验......value是我们从输入框输入的值，左右两个参数照写就得了
    var checkQty = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('数字不能为空'));
      }

      // 此处校验需注意，要在v-model后加.number，否者输入的是字符串，这地方就失效了
      if (!Number.isInteger(value)) {
        return callback(new Error('请输入数字值'));
      }
      // 获取消费类型，X100，Y200
      var spendType = this.form.type;
      if (spendType == 200) {
        var allocQty = this.form.qty;
        if (value > allocQty) {
           callback(new Error('优惠卷数为' + allocQty + ',数量不能大于Y的数量'));
        } else {  // 在执行这个if的时候，忘记了如果不大于之后的callback()的回调，导致新增提交的时候，不大于时没有回调，确定按钮点着没反应，
          callback();
        }
      } else {
        callback();
      }
    };
    return {
// 表单校验
      rules: {
        money: [
          { required: true, message: "金额不能为空", trigger: "blur" },
          {
            //此处用了正则表达式校验
            pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, 
            message: "请输入金额数字，最多两位小数",
          },
        ],
        qty: [
          { validator: checkQty, trigger: "blur" },      // validator 验证器 trigger类型有blur和change
        ],
      },

}

自我感觉在注释中写的差不多了，就不在一一赘述了，就说一下自我认为需要注意的点吧！

验证器validator中的方法是这个欧，如下图：（我不想多嘴的，我只是为了凑字数而已）

checkQty方法中需要注意的是，如果有什么 if（xxx）{} 啥的其它逻辑判断的话，记得看你的程序最后是否有 callback() 方法的回调，如果没有，需要加上 callback() 回调，如果你走了 if 里面的方法，里面有回调，如果不走 if ，然后你就没有 callback() 的回调，那么可能你也会像我一样出现下面这种情况，往下滑……