你的位置:首页 > 信息动态 > 新闻中心
信息动态
联系我们

js汉字大小写,正则校验金额表单

2021/12/10 15:38:03

//
效果图
在这里插入图片描述
这个大写的代码是我在网上复制过来的,如果作者看到可以留言我让我署名或者放链接(那个最大处理数字可能被我改过,但是我限制了表单输入字符,所以不会有其他bug,如果数值再大,会产生精确度的问题,这个我还没有找到答案,所以就先这样吧)

convertToChinaNum(money) {
      var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖')
      // 基本单位
      var cnIntRadice = new Array('', '拾', '佰', '仟')
      // 对应整数部分扩展单位
      var cnIntUnits = new Array('', '万', '亿', '兆')
      // 对应小数部分单位
      var cnDecUnits = new Array('角', '分')
      // 整数金额时后面跟的字符
      var cnInteger = '整'
      // 整型完以后的单位
      var cnIntLast = '元'
      // 最大处理的数字
      var maxNum = 9999999999999999.9999
      // 金额整数部分
      var integerNum
      // 金额小数部分
      var decimalNum
      // 输出的中文金额字符串
      var chineseStr = ''
      // 分离金额后用的数组,预定义
      var parts
      // if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(money)) return '数据非法'
      if (money == '') { return '' }
      money = parseFloat(money)
      if (money >= maxNum) {
        // 超出最大处理数字
        return ''
      }
      if (money == 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger
        return chineseStr
      }
      // 转换为字符串
      money = money.toString()
      if (money.indexOf('.') == -1) {
        integerNum = money
        decimalNum = ''
      } else {
        parts = money.split('.')
        integerNum = parts[0]
        decimalNum = parts[1].substr(0, 2)
      }
      // 获取整型部分转换
      if (parseInt(integerNum, 10) > 0) {
        var zeroCount = 0
        var IntLen = integerNum.length
        for (var i = 0; i < IntLen; i++) {
          var n = integerNum.substr(i, 1)
          var p = IntLen - i - 1
          var q = p / 4
          var m = p % 4
          if (n == '0') {
            zeroCount++
          } else {
            if (zeroCount > 0) {
              chineseStr += cnNums[0]
            }
            // 归零
            zeroCount = 0
            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m]
          }
          if (m == 0 && zeroCount < 4) {
            chineseStr += cnIntUnits[q]
          }
        }
        chineseStr += cnIntLast
      }
      // 小数部分
      if (decimalNum != '') {
        var decLen = decimalNum.length
        for (var i = 0; i < decLen; i++) {
          var n = decimalNum.substr(i, 1)
          if (n != '0') {
            chineseStr += cnNums[Number(n)] + cnDecUnits[i]
          }
        }
      }
      if (chineseStr == '') {
        chineseStr += cnNums[0] + cnIntLast + cnInteger
      } else if (decimalNum == '') {
        chineseStr += cnInteger
      }
      return chineseStr
    },

这个就是大写的代码了,复制了直接调用就可以了

		<template v-slot:capitalize="scope">
          <el-input :value="ruleForm.purchaseTaxUpper" />
        </template>
        <template v-slot:capitalize1="scope">
          <el-input v-model="ruleForm.purchaseTaxLower" placeholder="请输入价税合计" maxlength="16" @input="capiBtn" @blur="taxLower" />
        </template>

我用的是封装好的组件,所以用了插槽,有点懒,不想替换了,你们就把插槽替换成el-form-item就好
@input是输入时的事件,@blur是光标离开表单的事件

const numberTo = (rule, value, callback) => {
      const regExp1 = /^\d+(.\d+)?$/   // 数字和小数点的正则
      if (!regExp1.test(value.replace(/,/g, ''))) {   // 替换掉千分符
        return callback(new Error('请输入正确的数字'))
      }
      callback()  // 如果不加这个会导致所有的校验跳过
    }

这个校验是只校验数字和小数点,千分符被我替换掉了,但是如果只加这个校验,输入千分符的时候,千分符会被替换,多个千分符校验依然通过

 capiBtn() {
      this.ruleForm.purchaseTaxUpper = this.convertToChinaNum(this.ruleForm.purchaseTaxLower)
    },

当触发input事件的时候,调用大写函数

taxLower() {
      if (this.test + '' === this.ruleForm.purchaseTaxLower) {  // 判断鼠标离开时的数据和移入是否有变化,没有变化的话就退出,不再继续向下执行,不然会变成NaN哦
        return
      }
      this.ruleForm.purchaseTaxLower = this.ruleForm.purchaseTaxLower.replace(/,/g, '')  // 把千分符替换掉,这样大写的数据也会一样展示出来了,不会判断成异常数据
      if (isNaN(this.ruleForm.purchaseTaxLower)) {  // 判断小写的数据格式是否正确
        this.ruleForm.purchaseTaxUpper = ''   // 不正确大写的数据就为空
        return
      }
      this.test = (Number(this.ruleForm.purchaseTaxLower).toFixed(2) + '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, '$1,')   // 千分符+小数+去零
      this.ruleForm.purchaseTaxLower = this.test
    },

这里写的什么就将就看吧,因为是垃圾崽的代码,你们可以优化就优化

data() {
	const numberTo = (rule, value, callback) => {
      const regExp1 = /^\d+(.\d+)?$/   // 数字和小数点的正则
      if (!regExp1.test(value.replace(/,/g, ''))) {   // 替换掉千分符
        return callback(new Error('请输入正确的数字'))
      }
      callback()  // 如果不加这个会导致所有的校验跳过
    }
	return {
		ruleForm: {
			purchaseTaxUpper: '' // 大写
			purchaseTaxLower: ''// 小写
		},
		test: 0
	}
}

我自测是没有问题的,当然不排除我没发现其他的问题,我非常菜,所以有啥不对轻喷