vue+elementui 表单验证的各种形式(自定义)2）. type="number" 三. 数字框的限制情况

一.不能输入空格

v-model.trim="value"

二.数字框的校验

总结三种数形式的优缺点

1）.v-model.number

优点：

可以使用:min="0" :max="9999" maxlength="10"限制最大最小值（位数）缺点：
可以校验12d,不能校验dddd
会出现以中文输入字符按shift可以输入的情况
不能输入小数

2）. type="number"

优点：

不会出现以中文输入字符按shift可以输入的情况
可以校验12d,也可以校验dddd 缺点：
不能限制输入的最大最小值，即不能限制输入的最大位数，min,max只能限制增加减小时的大小

3）.el-input-number

优点：

不会出现以中文输入字符按shift可以输入的情况（失去焦点会返回默认值）
可以校验12d,也可以校验dddd（失去焦点会返回默认值）
可以使用:min="0" :max="9999" maxlength="10"限制最大最小值（位数）
限制小数位数:precision="2" 缺点：
有去不掉的默认值0

三. 数字框的限制情况

1.只能输入整数并且限制位数

1) el-input v-model.number 可以使用maxlength="10" 限制长度

注意：v-model.number 可以校验12d,不能校验dddd 再添加@blur="changeDepreciation('zysupport')"解决或者直接使用@change="changeDepreciation('depreciation')"，前者是不能输入字符后者是失去焦点后字符清空

<el-input v-model.number="ruleForm.zysupport" style="width:120px;" maxlength="10" @keyup.native="changeDepreciation('zysupport')" @blur="changeDepreciation('zysupport')"></el-input>

// 正则判断
  changeDepreciation (value) {
      this.ruleForm[value] = this.ruleForm[value].toString().replace(/[^.\d]/g, '')
    },

2）el-input type="number"

注意： :min="1" :max="54" 设置上下加减的最大最小值
el-input type="number" 不会出现以中文输入字符按shift可以输入的情况

<el-input type="number" :min="1" :max="54" v-model="formData.expectedWeeks" placeholder="请输入预产周数" size="small"></el-input>

校验的方法

      if (Number(expectedWeeks) < 1 || Number(expectedWeeks) > 54 || Number(expectedWeeks) !== parseInt(Number(expectedWeeks))) {
        this.$message.warning('预产周数请输入1-54之间的正整数！')
        return false
      }

3）el-input-number

注意：有默认值0

<el-input-number v-model="ruleForm.jmsupport" :precision="2" :min="0" :max="9999999999"></el-input-number>

2.整数或者保留2位小数

1）如果可以有默认值0

使用el-input-number

<el-input-number v-model="ruleForm.zysupport" :precision="2" :min="0" :max="9999999999"></el-input-number>

2）如果不能有默认值0

<el-input type="number" v-model="ruleForm.productPrice" :min="0" @keyup.native="decimalPlaces('productPrice')"></el-input>
    // 保留两位小数
    decimalPlaces (value) {
      if (this.ruleForm[value].indexOf('.') > -1) { // 小数
        this.ruleForm[value] = /^\d+\.?\d{1,2}$/.test(this.ruleForm[value]) ? this.ruleForm[value] : this.ruleForm[value].substr(0, this.ruleForm[value].length - 1)
      } else if (this.ruleForm[value] < 0) { // 小于0
        this.ruleForm[value] = 0
      } else if (this.ruleForm[value].length > 10) { // 位数大于10
        this.ruleForm[value] = this.ruleForm[value].substr(0, 10)
      }
    },

四.输入框不能输入特殊字符

// 删除输入框特殊字符
export const delSpecialParam = (value) => {
  return value.replace(/[\\`~!@#$%^&*()+=|{}:;_,.<>/?~\-！@#￥%……&*（）——+|{}'"]+/g, '')
}

五.限制输入位数

<el-input type="number" v-model="ruleForm.bulk" :min="0" @keyup.native="ruleForm.bulk=ruleForm.bulk.length > 2 ? ruleForm.bulk.substr(0,2): ruleForm.bulk"></el-input>

六.使用elementui的表单验证问题

1）出现英文提示

删除el-form-item的required

<el-form-item label="是否有外部链接：" :label-width="formLabelWidth" prop="link">

link:[
       { required: true, message: '请选择是否有外部链接', trigger: 'blur' },
 ]

trigger: 'blur' 失去焦点时触发