记录前端input框输入内容常见验证规则及处理

前端表单数据验证是很常见的需求，下面记录一些常见的表单相关校验方法：

 

1.关于H5 input 框拉取纯数字键盘问题

在原生的input输入框中可以通过type="number"限定输入内容为数字，但这种类型无法使用maxlength限制字段长度，在输入框还可以输入"e"等自然常数和基本的运算符号，如："+"、"-"等，而且该输入框的右侧还有数字操作按钮，影响美观。该类型在实际使用过程中并不友好。

在H5页面想要解决上面问题可以将type类型设置成"tel"类型，可以直接拉取手机自带的数字键盘。若ios无法正常拉起数字键盘，可以通过设置input上的pattern属性为"[0-9]*"解决。

 

<input type="tel" pattern="[0-9]*" />

 

若在pc端则通过下面的方法解决比较合适。

 

2.纯数字格式校验

要求： 只允许输入数字；

触发场景：在input事件中触发，验证用户输入的内容，若输入的内容不为数字则将新输入的非数字内容去除。

/** 
* 校验数字是否正确
 * @param num
 * @returns */ 
 function isNumber(num: string) { 
    let sanitized = num.replace(/[^\d]/g, '')
    return sanitized ? Number(sanitized).toString() : ''
 }

 

 

3.浮点小数格式化

要求： （1）符合正常的浮点小数数字；

    （2）整数部分不能以连续的“0”开头；

    （3）小数点后面最多保留x位小数；

触发场景：在input事件中触发，验证用户输入的内容，若输入的内容不为数字则将新输入的非数字内容去除。

 

/**
 * 格式化小数
 * @param num 数
 * @param precision 保留小数位数
 * @returns
 */
 export function formatNumber(num: string, precision = 4): string {
  // 只保留数字、小数点
  let sanitized = num.replace(/[^\d.]/g, '')
  // 如果第一位是小数点，删除它
  if (sanitized[0] === '.') {
    sanitized = sanitized.slice(1)
  }
  // 如果存在多个连续的小数点，只保留第一个
  sanitized = sanitized.replace(/(\.\d*)\./g, '$1')
  // 过滤整数部分以多个0开头情况
  if (sanitized) {
    let numArr = sanitized.split('.')
    numArr[0] = Number(numArr[0]).toString()
    sanitized = numArr.join('.')
  }
  // 最多保留precision位小数
  const regexPattern = new RegExp(`(-?\\d*\\.?\\d{0,${precision}})`)
  const newPrice = regexPattern.exec(sanitized)
  return newPrice ? newPrice[1] : ''
}