美文网首页
关于input输入的限制

关于input输入的限制

作者: 简小咖 | 来源:发表于2018-12-12 17:49 被阅读0次

1、限制必需填写数字

  <el-input
          @keyup.enter.native="handleFilter"
          style="width:70%"
          placeholder="请输入会员ID"
          oninput = "this.value=this.value.replace(/[^\d]/g,'')"
          v-model.number="query.userId"
        >
        </el-input>

2、限制必需填写数字,且小数点后只保留2位

<el-input v-model.number="transferAmt"
            type="number"
            @input="transferAmt=/^\d+\.?\d{0,2}$/.test(transferAmt)||
transferAmt == '' ? transferAmt : transferAmt=''"
            placeholder="请输入金额"
          ></el-input>

2、数字在一定范围内

    <el-form :rules="typeRules" ref="typeForm" :model="typeForm" >

      <el-form-item label="金额" prop="rate">
        <el-input type="number" 
@input="typeForm.rate=/^\d+\.?\d{0,2}$/.test(typeForm.rate)||
typeForm.rate == '' ? typeForm.rate : typeForm.rate=''" 
v-model.number="typeForm.rate" 
:min="0" :max="100"placeholder="请输入金额"></el-input>
        <span>%</span>
      </el-form-item>
    </el-form>

export default { 
 data() {
    return {
      typeForm: {
        rate: ''
      },
      typeRules: {
        rate: [
          { type: 'number', min: 0, max: 100, 
message: '金额必须为0-100之间的数字', trigger: 'blur' }
        ]
      },
    }
  },
methods: {
    onUpdate() {
      this.$refs.typeForm.validate(valid => {
        if (valid) {
         // 通过验证
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
}

相关文章

网友评论

      本文标题:关于input输入的限制

      本文链接:https://www.haomeiwen.com/subject/cplphqtx.html