js限制输入框的输入类型

限制输入数据类型

1. 限制输入中文

1.1 输入框添加 键盘弹起事件

<el-input @keyup.native="checkChinese('name', $event)" v-model.trim="form.name" placeholder="请输入姓名"  clearable ></el-input>

1.2 在methods 中加入checkChinese方法

 // 限制只能输入汉字
 checkChinese (key, $event) {
    $event.target.value = $event.target.value.replace(/[^\u4E00-\u9FA5]/g, '')
    this.form[key] = $event.target.value
  },

2. 限制输入数字

2.1 输入框添加 键盘弹起事件

<el-input type="text" @keyup.native="checkNumber('money', $event)" v-model.trim="form.money" placeholder="请输入金额" ></el-input>

2.2 限制输入 数字

	// 限制输入 数字
    checkNumber(key, $event) {
      $event.target.value = $event.target.value.replace(/[^\d]/g, '')
      this.originRuleForm[key] = $event.target.value
    },

3.限制输入 数字 和 大写字母X(身份证号)

	// 限制输入 数字 和 大写字母X
	checkNumberX(key, $event) {
	  $event.target.value = $event.target.value.replace(/[^\dX]/g, '')
	  this.form[key] = $event.target.value
	},

4.限制输入 字母 和 数字

    // 限制输入 字母 和 数字
    checkNumberLetter (key, $event) {
      $event.target.value = $event.target.value.replace(/[^0-9a-zA-Z]/g, '')
      this.form[key] = $event.target.value
    },

5. common.js文件

/** 限制输入数字
 * limitInputNum
 * @param {*} form 表单对象
 * @param {*} key 表单对象里需要限制输入的属性
 * @param {*} length 限制输入的长度
 * @param {*} $event 事件对象
 */
export const limitInputNum = (form, key, length = 0, $event) => {
  let str = ''
  if (length > 0) {
    str = $event.target.value
    if (str && str.length > length) {
      str = str.slice(0, length)
    }
  }
  $event.target.value = str.replace(/[^\d]/g, '')
  form[key] = $event.target.value
}

/** 限制输入 汉字
 * limitChinese
 * @param {*} form 对象
 * @param {*} key 对象里需要限制输入的属性
 * @param {*} length 限制输入的长度
 * @param {*} $event 事件对象
 */
export const limitChinese = (form, key, length = 0, $event) => {
  let str = ''
  if (length > 0) {
    str = $event.target.value
    if (str && str.length > length) {
      str = str.slice(0, length)
    }
  }
  $event.target.value = str.replace(/[^\u4E00-\u9FA5]/g, '')
  form[key] = $event.target.value
}
/** 限制输入 数字 字母
 * limitNumberChar
 * @param {*} form 对象
 * @param {*} key 对象里需要限制输入的属性
 * @param {*} length 限制输入的长度
 * @param {*} $event 事件对象
 */
export const limitNumberChar = (form, key, length = 0, $event) => {
  let str = ''
  if (length > 0) {
    str = $event.target.value
    if (str && str.length > length) {
      str = str.slice(0, length)
    }
  }
  $event.target.value = str.replace(/[^a-zA-Z\d]/g, '')
  form[key] = $event.target.value
}
/** 限制输入字母
 * limitChar
 * @param {*} form 对象
 * @param {*} key 对象里需要限制输入的属性
 * @param {*} length 限制输入的长度
 * @param {*} $event 事件对象
 */
export const limitChar = (form, key, length = 0, $event) => {
  let str = ''
  if (length > 0) {
    str = $event.target.value
    if (str && str.length > length) {
      str = str.slice(0, length)
    }
  }
  $event.target.value = str.replace(/[^a-zA-Z]/g, '')
  form[key] = $event.target.value
}
/** 分机号: 数字 和 中横线 "-"
 * limitExtNumber
 * @param {*} form 对象
 * @param {*} key 对象里需要限制输入的属性
 * @param {*} length 限制输入的长度
 * @param {*} $event 事件对象
 */
export const limitExtNumber = (form, key, length = 0, $event) => {
  let str = ''
  if (length > 0) {
    str = $event.target.value
    if (str && str.length > length) {
      str = str.slice(0, length)
    }
  }
  $event.target.value = str.replace(/[^\d-]/g, '')
  form[key] = $event.target.value
}

5.1 导入后使用方法

<el-input v-model="memberForm.extNumber" @keyup="limitExtNumber(memberForm, 'extNumber', 50, $event)" type="text" autocomplete="off" maxlength="50"/>