javascript 设置输入框只能输入12位的十六进制数

设置输入框只能输入12位的十六进制数，表单中输入框绑定事件监听input输入：

<el-table-column :label="$t('deviceManage.device.rfidTable.rfidCode')"
                      @input="formData.lng=$LimitInput($event,'rfid')"
                      prop="rfidCode">
</el-table-column>

表单验证规则：

export default {
  data() {
    var validateRfid = (rule, value, callback) => {
      if (value === '' || value === undefined) {
        callback(new Error(this.$t('deviceManage.device.formErr.rfidCode')))
      } else {
        if (this.$CheckInput(value, 'rfid')) {
          callback()
        } else {
          callback(new Error(this.$t('deviceManage.device.formErr.rfidCode')))
        }
      }
    }
    return {
      rules: {
        rfidCode: [
          {
            required: true,
            validator: validateRfid,
            trigger: 'change'
          }
        ]
      },
      formData: {}
    }
  }
}

method.js中代码：

export function LimitInput(value, type) {
  console.log('LimitInput', 'value:', value, 'type:', type)
  if (value) {
    let result = ''
    switch (type) {
      case 'rfid':
        result = value.replace(/[^0-9a-fA-F]/g, '')
        return result.toUpperCase().substring(0, 12)
      default:
        break
    }
  }
}

export function CheckInput(value, type) {
  console.log('CheckInput', 'value:', value, 'type:', type)
  switch (type) {
    case 'rfid':
      return value.length === 12
    default:
      break
  }
}

由于要实现两个需求：

（1）判断输入是否为12位

（2）判断输入是否为十六进制数，并且将输入的小写字母时转换为大写字母。

看到很多方法判断输入长度类似于这种写法：[^0-9a-fA-F]{12}，我试了下，发现 replace 中使用 {12} 不起作用，所以还是分开两个方法 LimitInput 和 CheckInput 分别进行判断。

LimitInput 用于判断输入是否为十六进制数，并且将输入的小写字母时转换为大写字母；

CheckInput 则用于表单验证判断输入是否为12位。

由于项目很多处都会用到，所以将这两个方法挂载到原型上，在main.js中添加如下代码：

import { LimitInput, CheckInput } from '@/utils/method'
Vue.prototype.$LimitInput = LimitInput
Vue.prototype.$CheckInput = CheckInput

效果如下：