input框输入进行校验

由于项目中使用的单纯的input校验,所以选择使用按钮事件
:onkeypress(),
使用键盘弹起事件也是可以的

    <template slot-scope="scope">
      <div>
        <el-input  v-model="scope.row[scope.column.property]"
                  :show-overflow-tooltip="true"   
                  :onkeyup="verify(scope)"/>
      </div>
    </template>

使用elementUI写的

    verify(scope){

      for (const value in scope.row) {
        if(                               //限制整数和两位小数 9-2
          value=="userNumber"    //需要校验的具体字段
        ){
          if(scope.row[value]!=""&&scope.row[value]!=null){
            scope.row[value] = this.inputnum92(scope.row[value])
          }
        }

        if(                                //限制整数和两位小数 12-2
         value=="tradeSucEng"
        ){
          if(scope.row[value]!=""&&scope.row[value]!=null){
            scope.row[value] = this.inputnum12Do2(scope.row[value])
          }
        }

        if(                              //限制整数和两位小数 6-2 正负
          value=="approvedTariff"
        ){
          if(scope.row[value]!=""&&scope.row[value]!=null){
            scope.row[value] = this.inputnumZF62(scope.row[value])
          }
        }

        if(                              //限制整数和两位小数 6-2 正数和负数
          value=="purchaseEngMRate"
        ){
          if(scope.row[value]!=""&&scope.row[value]!=null){
            scope.row[value] = this.inputnumZF62(scope.row[value])
          }
        }

        if(                                    //限制正整数
          value=="tradeSucNumber"
        ){
          if(scope.row[value]!=""&&scope.row[value]!=null){
            scope.row[value] = this.inputnumZZ(scope.row[value])
          }
        }

        if(                                                  //校验大小字母 数字
  
          value=="tradeNumber"
        ){
          if(scope.row[value]!=""&&scope.row[value]!=null){
            scope.row[value] = this.inputStringNum(scope.row[value])
          }
        }

        if(                                            //校验大小字母 中文 数字
          value=="tradeName"
        ){
          if(scope.row[value]!=""&&scope.row[value]!=null){
            scope.row[value] = this.inputStringNumCn(scope.row[value])
          }
        }

      }
    },
//校验整数
inputnumZ(val){
  val = val.toString()
  let num = val.replace(/[^\d]/g, "")
    .replace(/\-{2,}/g, '-'); //清除"数字"和"."以及"-"以外的字符;
  return num
},
    //校验正整数
    inputnumZZ(val){
      val = val.toString()
      let num = val.replace(/[^\d]/g, "")
      if (num.length > 9) {
        num = num.slice(0, 9);
      }//清除"数字"和"."以及"-"以外的字符;
      return num
    },
//校验小数 小数点前6位 小数点后2位 正负数
inputnumZF62(val) {
  val = val.toString()
  // let num = val.replace(/[^(\-|\+)?\d.]/g, ""); //清除"数字"和"."以外的字符
  let num = val.replace(/[^(\-)?\d.]/g, "")
    .replace(/\-{2,}/g, '-')
    .replace(/^\./g, '')
    .replace(/(\d.*)-/, '$1')
    .replace(/(\..*)\-/, '$1')
    .replace(/\-\./, ''); //清除"数字"和"."以及"-"以外的字符
  num = num.replace(/^(\.)/g, ""); //验证第一个字符是数字
  if (num.indexOf('.') == -1) { //小数点前留6位
    if (num.length > 6) {
      num = num.slice(0, 6);
    }
  } else {
    if (num.split('.')[0].length > 6) {
      num = num.split('.')[0].slice(0, 6) + '.' + num.split('.')[1];
    }
  }
  num = num.replace(/\.{2,}/g, ""); //只保留第一个, 清除多余的
  num = num.replace(".", "$#$")
    .replace(/\./g, "")
    .replace("$#$", ".");

  // num = num.replace(/^(\-|\+)?(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
  num = num.replace(/^\d\.(\d\d).*$/, '$1$2.$3')
    .replace(/^\d\.(\d\d).*$/, '$1$2.$3')
    .replace( /([0-9]+\.[0-9]{2})[0-9]*/,'$1') //只能输入两个小数
  return num
},
    //校验小数 小数点前9位 小数点后2位
    inputnum92(val) {
      val = val.toString()
      let num = val.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
      num = num.replace(/^\./g, ""); //验证第一个字符是数字
      if (num.indexOf('.') == -1) { //小数点前留9位
        if (num.length > 9) {
          num = num.slice(0, 9);
        }
      } else {
        if (num.split('.')[0].length > 9) {
          num = num.split('.')[0].slice(0, 9) + '.' + num.split('.')[1];
        }
      }
      num = num.replace(/\.{2,}/g, ""); //只保留第一个, 清除多余的
      num = num.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      num = num.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
      return num
    },
    //校验小数 小数点前12位 小数点后2位
    inputnum12Do2(val) {
      val = val.toString()
      let num = val.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
      num = num.replace(/^\./g, ""); //验证第一个字符是数字
      if (num.indexOf('.') == -1) { //小数点前留12位
        if (num.length > 12) {
          num = num.slice(0, 12);
        }
      } else {
        if (num.split('.')[0].length > 12) {
          num = num.split('.')[0].slice(0, 12) + '.' + num.split('.')[1];
        }
      }
      num = num.replace(/\.{2,}/g, ""); //只保留第一个, 清除多余的
      num = num.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      num = num.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
      return num
    },
//校验大小字母 数字
inputStringNum(val) {
  val = val.toString()
  let num = val.replace(/[^\a-\z\A-\Z0-9]/g, "");

  return num
},
//校验大小字母 中文 数字
inputStringNumCn(val) {
  val = val.toString()
  let num = val.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, "");

  return num
},

使用正则表达式实现输入非法字符的替换、由于正则的使用方式以及校验规则的千变万化这里不一一列举。

生存还是毁灭,这是个问题。是默然忍受命运的暴虐的毒箭,或是挺身反抗人世的无涯的苦难,通过斗争把它们扫清,这两种行为,哪一种更高贵? ——《哈姆雷特》

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容