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

GoodTime

发布于 2024-03-05 16:14:49

3500

发布于 2024-03-05 16:14:49

文章被收录于专栏：GoodTime的全栈开发GoodTime的全栈开发

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>

② 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的数'))
    }
  }
}

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的正数'))
    }
  }
}

② 验证正整数+正小数

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的正实数'))
    }
  }
}

③ 验证正整数+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的正整数'))
    }
  }
}

④ 验证正整数

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的正整数'))
    }
  }
}

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

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位'))
    }
  }
}