vue两个输入框联动校验方式(最大值-最小值)

目录
  • vue两个输入框联动校验
  • vue表单中范围两个输入框共用一个验证

vue两个输入框联动校验

如下图,

1.满足最大值和最小值的输入要求【1-100的整数】

2.满足最小值不能大于等于最大值

3.当最小值有报红校验,改正最大值使得最大值大于最小值,最小值的报红校验消失

html代码

最大值:

<el-input v-model="restoreForm.maxrate" placeholder="请输入" style="margin-left:5px;width:140px" @blur="checknum('max')"></el-input>

最小值:

<el-input v-model="restoreForm.restorerate" placeholder="请输入" style="margin-left:5px;width:140px" @blur="checknum('min')"></el-input>

代码不全,仅作参考

data中的validate校验

//最小值
    const checkrestorerate = (rule, value, callback) => {
      const { maxrate, restorerate } = this.restoreForm;

      // let reg = /^([1-9]|[1-9]\d|1\d{2}|100)$/;
      let reg = /^([1-9][0-9]{0,1}|100)$/;
      if (!reg.test(restorerate)) {
        return callback(new Error("请输入1-100内整数"));
      } else {
        if (
          Number(maxrate) &&
          Number(restorerate) &&
          Number(restorerate) >= Number(maxrate)
        ) {
          return callback(new Error("最小值需小于最大值"));
        } else {
          return callback();
        }
      }
    };
    //最大值
    const checkmaxrate = (rule, value, callback) => {
      const { maxrate, restorerate } = this.restoreForm;
      let reg = /^([1-9][0-9]{0,1}|100)$/;
      if (!reg.test(maxrate)) {
        return callback(new Error("请输入1-100内整数"));
      } else {
        if (
          Number(maxrate) &&
          Number(restorerate) &&
          Number(restorerate) >= Number(maxrate)
        ) {
          return callback(new Error("最小值需小于最大值"));
        } else {
          return callback();
        }
      }
    };
 checknum(type) {
      if (type === "max") {
        if (this.restoreForm.maxrate > this.restoreForm.restorerate) {
          this.$refs.restoreForm.validateField("restorerate");
        }
      } else {
        if (this.restoreForm.maxrate > this.restoreForm.restorerate) {
          this.$refs.restoreForm.validateField("maxrate");
        }

      }
    },

这个方法首先判断是哪个输入框的blur事件,然后如果符合最大值大于最小值,那么之前最小值的报错校验再次校验,为符合条件,即报红提示消失

vue表单中范围两个输入框共用一个验证

最近碰到一个需求,就是一个有一项数据取一个范围,并做验证,但是UI的验证提醒文字是合并在一起的,并不是每个输入框有单独的验证提醒,本文以elementUI为例,按需求进行了一些改动。

<template>
  <div class="app-container">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="范围" prop="area">
        <el-col :span="11">
          <el-form-item prop="start">
            <el-input v-model="ruleForm.start" placeholder="请输入起始值(0-1000)" />
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2" style="text-align:center">-</el-col>
        <el-col :span="11">
          <el-form-item prop="end">
            <el-input v-model="ruleForm.end" placeholder="请输入结束值(0-1000)" />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    const validateStart = (rule, value, callback) => {
      if (!!value) {
        // 1-1000的正则
        const numReg = /^(?!00)(?:[0-9]{1,3}|1000)$/
        if (!numReg.test(value)) {
          this.ruleForm.areaRules[0] = 1
          // 手动触发最外层form-item的正则验证
          this.areaBlur()
          return callback()
        }
        if (numReg.test(value)) {
          this.ruleForm.areaRules[0] = 2
          this.areaBlur()
          return callback()
        }
        this.ruleForm.areaRules[0] = 0
        this.areaBlur()
        callback()
      } else {
        this.ruleForm.areaRules[0] = -1
        this.areaBlur()
        return callback()
      }
    }
    const validateEnd = (rule, value, callback) => {
      if (!!value) {
        // 1-1000的正则
        const numReg = /^(?!00)(?:[0-9]{1,3}|1000)$/
        if (!numReg.test(value)) {
          this.ruleForm.areaRules[1] = 1
          this.areaBlur()
          return callback()
        }
        if (numReg.test(value)) {
          this.ruleForm.areaRules[1] = 2
          this.areaBlur()
          return callback()
        }
        this.ruleForm.areaRules[1] = 0
        this.areaBlur()
        callback()
      } else {
        this.ruleForm.areaRules[1] = -1
        this.areaBlur()
        return callback()
      }
    }
    // areaRules内值的含义:-1 提醒不能为空 0则表示正常 其他值为格式错误
    const validateArea = (rule, value, callback) => {
      if (this.ruleForm.areaRules.includes(-1)) {
        return callback(new Error('范围不能为空'))
      }
      if (this.ruleForm.areaRules[0] !== this.ruleForm.areaRules[1] || this.ruleForm.areaRules[0] === 1 || this.ruleForm.areaRules[1] === 1) {
        return callback(new Error('格式错误'))
      }
      if (this.ruleForm.start > this.ruleForm.end) {
        return callback(new Error('起始序号不能大于截止序号'))
      }
      callback()
    }
    return {
      ruleForm: {
        start: '',
        end: '',
        areaRules: [-1, -1]
      },
      rules: {
        start: [{ type: 'string', required: true, validator: validateStart, trigger: 'blur' }],
        end: [{ type: 'string', required: true, validator: validateEnd, trigger: 'blur' }],
        area: [{ type: 'array', required: true, validator: validateArea, trigger: 'change' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 手动触发最外层form-item的正则验证
    areaBlur() {
      this.$refs['ruleForm'].validateField('area')
    }
  }
}
</script>

效果:

不仅是elementUI,其他前端框架也是可以这样改的,只是需要一些细节

该方式还可以在填写ip地址的时候应用

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue 两个字段联合校验之修改密码功能的实现

    目录 1.前言 2.方案实现 2.1.实现代码 2.2.代码说明 2.3.校验效果 1.前言   本文是前文<Vue Element-ui表单校验规则,你掌握了哪些?>针对多字段联合校验的典型应用.   在修改密码时,一般需要确认两次密码一致,涉及2个属性字段.类似的涉及2个属性字段的情况有: 日期时间范围,如果两者都有值,则要求:结束时间>=开始时间. 数量关系:数量下限<=数量上限.   特点是两个属性值都是可变的.本文以校验两次密码的一致性应用,给出两个可变属性值的字段之间的

  • vue中输入框事件的使用及数值校验方式

    目录 vue输入框事件使用及数值校验 一.@input(或者是v-on:input) 二.@change 三.@keyup.enter 四.@blur(失焦) 提示和注释 vue中常用表单校验规则整理 这里整理了一些高频率用到的校验方法 vue输入框事件使用及数值校验 最近做项目,用到vue去监听输入框当中值,并且去校验值的正确性, 我们都知道 vue 当中 主要监听输入框的方法有四个:input  change blur  keyup.enter 他们都可以使用@+xxxx="在vue当中定义

  • Vue下拉框双向联动效果的示例代码

    一.前言 在开发前端页面的时候,常常需要写下拉框,普通常见的下拉框有在页面写死固定值的下拉框,有通过调用后台接口服务而获取的值列表等.无论是原始的jsp页面html页面等,还是现在流行的vue angluar.js等,逻辑都是一样.本文讲解VUE页面中,多个下拉框如何实现双向联动效果. 二.代码示例 2.1 在vue页面的<el-form 表单里填充两个<el-col :span="12">选项,分别为选项A和选项B,如下所示: <el-col :span=&q

  • vue两个输入框联动校验方式(最大值-最小值)

    目录 vue两个输入框联动校验 vue表单中范围两个输入框共用一个验证 vue两个输入框联动校验 如下图, 1.满足最大值和最小值的输入要求[1-100的整数] 2.满足最小值不能大于等于最大值 3.当最小值有报红校验,改正最大值使得最大值大于最小值,最小值的报红校验消失 html代码 最大值: <el-input v-model="restoreForm.maxrate" placeholder="请输入" style="margin-left:5

  • Vue实现两种路由权限控制方式

    目录 方式一:路由元信息(meta) 方式二:动态生成路由表(addRoutes) 路由权限控制常用于后台管理系统中,对不同业务人员能够访问的页面进行一个权限的限制. 对于无权限的页面可以跳转404页面或者提示无权限. 方式一:路由元信息(meta) 把所有页面都放在路由表中,只需要在访问的时候判断一下角色权限即可. vue-router 在构建路由时提供了元信息 meta 配置接口,我们可以在元信息中添加路由对应的权限,然后在路由守卫中检查相关权限,控制其路由跳转. 在 meta 属性里,将能

  • vue两个组件间值的传递或修改方式

    1.可以用公共的父组件来实现: 2.可以在store.js里面在设置公共变量: 3.也可以用本地存储localStorage.setItem()和localStorage.getItem(),通过修改本地存储的值和获取修改后的值来实现: 4.就是父子组件间的值的传递与修改props,这里需要注意的是子组件里面不      能直接修改props里面接受的值,需要定义一个中间变量来接受props里的值并修改,通过$emit即this.$emit('checkDisplay',this.display

  • vue 如何实现表单校验

    一.安装并使用 首先,在你的vue项目中进行安装: npm install --save vue-input-check 安装完成以后引入并注册: import inputCheck from 'vue-input-check'; // 安装 Vue.use(inputCheck); 然后,我们就可以在表单中使用了: <form autocomplete="off" novalidate> <input v-model='key' name='输入框名称' v-inp

  • 基于Vue开发数字输入框组件

    随着 Vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!! 1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: (1)index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-

  • springboot使用hibernate validator校验方式

    一.参数校验 在开发中经常需要写一些字段校验的代码,比如字段非空,字段长度限制,邮箱格式验证等等,写这些与业务逻辑关系不大的代码个人感觉有两个麻烦: 验证代码繁琐,重复劳动 方法内代码显得冗长 每次要看哪些参数验证是否完整,需要去翻阅验证逻辑代码 hibernate validator(官方文档)提供了一套比较完善.便捷的验证实现方式. spring-boot-starter-web包里面有hibernate-validator包,不需要引用hibernate validator依赖. 二.hi

  • Vue实现左右菜单联动实现代码

    本文介绍了Vue实现左右菜单联动实现代码吗,分享给大家,也给自己留个笔记,具体如下: Github 源码传送门: Rain120/vue-study 之前在外卖软件上看到这个左右联动的效果,觉得很有意思,所以就尝试使用 Vue 来实现,将这个联动抽离成为一个单独的组件,废话少说,先来一张效果图. 这个组件分为两个部分,1.左菜单:2.右菜单. 左菜单的 DOM 结构 <scroll class="left-menu" :data="leftMenu" ref=

  • vue原生input输入框原理剖析

    目录 正文 v-model 正文 首先我们来看一段代码: <input value="value"> 这里是一个原生的input输入框,每一个原生的输入框都会有一个value的属性来用于存储用于输入的最新的数据. 如果我们想要获取到这个值我们可以通过input.target.value或者通过$event.target.value来获取这个存储的值. 只要用户输入了数据,那么此时input标签就会将输入的数据放到这个value中(新数据会覆盖旧数据,所以我们获取到的都是最新

随机推荐