前端笔记-校验

车牌号长度验证 限制只能输入7-8位，如果不符合显示车牌输入错误

 :rules="[
      { required: true, message: '请输入车牌号',  trigger: 'blur' },
       { min: 7, max: 8,message: '请输入正确的车牌号',trigger: 'blur' }
    ]"

限制文本长度 代码

 type="text" maxlength="32"  show-word-limit 

限制数字 长度12以内 小数点后2位

  type="number"
                @input.native="changeRate($event, 'collectInformationAddress')"

import { changeRate } from '@/utils/validate'

changefourRate


row:-------------

 @input.native="validateRow($event, row, 'parkingUnitPrice')" type="number" 

validateRow(e, row, value) {
      // 限制输入长度12位，限制输入类型为数字和小数点，小数点后最多4位

      let data = row[value].toString().match(/\d{0,12}(\.\d{0,4})?/)
      if (data) {
        row[value] = data[0]
      } else {
        row[value] = ''
      }
    
  },
<el-input type="number"
              @input.native="changeRate($event,'collectInformationTotalFloorSpace')"

              v-model="formData.collectInformationTotalFloorSpace" />
            </el-form-item>

 changeRate(e, value) {
      let data = this.formData[value].toString().match(/\d{0,12}(\.\d{0,2})?/)
      if (data) {
        this.formData[value] = data[0]
      } else {
        this.formData[value] = ''
      }

限制 数字长度

限制输入整数

type="tel" maxlength="12" onkeyup="value=value.replace(/\D/g,'') " 
 changeXin(e, value) {
  // 限制输入长度12位，限制输入类型为数字和小数点，小数点后最多2位
  console.log('12================', '123', typeof value, 'iqwu')
  let data = this.formData[value].toString().match(/^[A-Za-z0-9]{7}$/)
  if (data) {
    this.formData[value] = data[0]
  } else {
    this.formData[value] = ''
  }
}
  

限制只能输入数字的英文

 type="tel" maxlength="18"    onkeyup="value=value.replace(/[^\.^\[A-Za-z0-9]{8}$+/g,'')"

联系电话校验

/^\d-?\d{11}$/


 { pattern: /^[0-9-]{1,13}/, message: '联系电话输入错误', trigger: 'blur' }

 <el-form-item label="联系电话" prop="contactNum">
            <el-input
              type="tel"
              maxlength="13"
              onkeyup="value=value.replace(/\D/g,'') "
              v-model="formData.contactNum"
              :disabled="disabledFlag"
            />
          </el-form-item>