el-input 输入验证 整数、小数、实数、整数、负数等

简介: el-input 输入验证 整数、小数、实数、整数、负数等

 1、关于前端页面代码和规则验证可以参照之前文章

el-input 限制只能输入正整数

2、本文主要阐述ts公共验证类结合rule的形式对输入值进行规则校验

① 前端页面部分

<template>
  <div class="container">
    <el-form
      ref="dialogForm"
      size="small"
      class="form"
      :model="dialogForm"
      :rules="rules"
    >
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item
            label="金额"
            prop="moneyNum"
          >
            <el-input
              v-model="dialogForm.moneyNum"
              autocomplete="off"
              placeholder="请输入金额"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script lang="ts">
import { Vue } from 'vue-property-decorator'
import { Form } from 'element-ui'
import { checkInputPositiveRealNum } from '@/utils/validate' // 验证
export default class Edit extends Vue {
  @Prop() method!: any;
  private dialogForm = {
    moneyNum: ''
  }
  private rules = {
    moneyNum: [{ validator: checkInputPositiveRealNum, trigger: 'blur' }]
  };
  private handleClose() {
    this.$emit('close')
  }
}
</script>
<style lang="scss" scoped>
.container {
  padding: 0px 20px 0 20px;
  .form {
    max-height: 700px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 30px;
  }
}
</style>

image.gif

② validate.ts 验证部分

// 输入验证:大于0的数
export const checkInputPositiveRealNum = (rule: any, value: string, callback: any) => {
  if (!value) {
    callback()
  } else {
    const regPositiveRealNum = /^(([1-9]\d*)|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g
    if (regPositiveRealNum.test(value)) {
      callback()
    } else {
      return callback(new Error('请输入大于0的数'))
    }
  }
}

image.gif

3、整数、小数、实数、整数、负数等的输入验证规则如下,只需要更新validate.ts和前端页面import { checkInputPositiveRealNum } from '@/utils/validate' // 验证的部分

① 验证正整数+正小数(包含0)

export const checkIsPositive = (rule, value, callback) => {
  if (!value) {
    callback()
  } else {
    const reg = /^\d+(?=\.{0,1}\d+$|$)/
    if (reg.test(value)) {
      callback()
    } else {
      callback(new Error('请输入大于等于0的正数'))
    }
  }
}

image.gif

② 验证正整数+正小数

export const checkIsPositiveEx0 = (rule, value, callback) => {
  if (!value) {
    callback()
  } else {
    /// ^(\d|[1-9]\d+)(\.\d{1,2})?$/          ---->2位小数
    const reg = /^(\d|[1-9]\d+)(\.\d+)?$/
    if (reg.test(value)) {
      if (value === '0') {
        callback(new Error('请输入大于0的正实数'))
      } else {
        callback()
      }
    } else {
      callback(new Error('请输入大于0的正实数'))
    }
  }
}

image.gif

③ 验证正整数+0

export const checkIsPositiveInteger = (rule, value, callback) => {
  if (!value) {
    callback()
  } else {
    const reg = /^(0|[1-9][0-9]*)$/
    if (reg.test(value)) {
      callback()
    } else {
      callback(new Error('请输入大于等于0的正整数'))
    }
  }
}

image.gif

④ 验证正整数

export const checkIsPositiveIntegerEx0 = (rule, value, callback) => {
  if (!value) {
    callback()
  } else {
    const reg = /^([1-9][0-9]*)$/
    if (reg.test(value)) {
      callback()
    } else {
      callback(new Error('请输入大于0的正整数'))
    }
  }
}

image.gif

⑤ 特殊要求举例(包括小数位数、输入整数和小数位数的长度等)

export const checkIsPositiveInteger123 = (rule, value, callback) => {
  if (!value) {
    callback()
  } else {
    const reg = /^[1-9]\d{0,11}(\.\d{1,4})?$|^0(\.\d{1,4})?$/
    if (reg.test(value)) {
      callback()
    } else {
      callback(new Error('请输入正确格式数字,整数位不能超过12位,小数位不能超过4位'))
    }
  }
}

image.gif

4、参考资料

① js正则表达式,自己写个真正好用的大于0的数字包括小数,排除0.0等实际等于0的小数

② js 大于等于0的正数和正整数

③ 正则:必须是正整数或小数,小数点后保留3位,输入整数不超过12位

若本文有帮助到阅读本文的同学,欢迎点赞、关注、收藏,互相学习交流。

目录
相关文章
|
3月前
|
前端开发
给elmentui中的el-table-column 添加背景色怎么加
本示例通过自定义 ECharts 图例的 `formatter` 函数,实现在图例中同时显示名称、数值和百分比。代码中还优化了图例布局和饼图标签样式,使数据展示更清晰直观。
308 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9162 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
资源调度 JavaScript
Vue + Element-ui组件上传图片报错问题解决方案
Vue + Element-ui组件上传图片报错问题解决方案
|
移动开发 JavaScript HTML5
el-input限制输入整数等分析
本文介绍了在Vue中限制el-input只能输入整数的几种方式,包括设置type为number,使用inputmode属性,自定义指令,计算属性,使用onafterpaste和onkeyup事件以及使用el-input-number的precision属性。每种方式都有其优缺点,可以根据实际需求选择合适的方式。比较建议用自定义指令的方式来实现。
2236 0
el-input限制输入整数等分析
|
12月前
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
3959 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
|
SQL Java 数据库连接
若依框架---PageHelper分页(三)
若依框架---PageHelper分页(三)
414 0
|
前端开发
el-input 限制只能输入正整数
el-input 限制只能输入正整数
644 0
|
前端开发
el-form-item label中的字体样式设置格式
这篇文章介绍了如何在Element UI的`el-form-item`组件中自定义`label`标签的样式,通过使用`slot`属性和内联CSS来改变字体颜色和加粗显示。
el-form-item label中的字体样式设置格式
Element - ui :el-input 输入只能是数字并且小数点后只能是1-2位
Element - ui :el-input 输入只能是数字并且小数点后只能是1-2位
4897 1