表单输入框自定义校验00开头数字问题

最新推荐文章于 2023-12-05 15:58:14 发布

原创最新推荐文章于 2023-12-05 15:58:14 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

js 同时被 2 个专栏收录

5 篇文章

订阅专栏

vue

5 篇文章

订阅专栏

本文探讨了在表单输入中遇到的问题，即用户输入0开头数字时会被自动去掉。作者提供了如何使用Vue的el-form和自定义验证函数，确保6-7位纯数字限制，并避免0被截断的方法。通过隐式转换并检查长度和整数性质，实现精确的校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单输入框自定义校验00开头数字问题

场景：表单校验用户只能输入6-7为数字

在这里插入图片描述

误区：使用element input中v-model.number 或者正则reg来判断。不能用这两种判断的原因是当用户输入0开头的数字时，会把前面的0去掉。比如输入了 000001，后面的value会是1

解决办法：

 <el-form-item label="警员编号:" prop="jobNumber">
            <el-input v-model="submitObj.jobNumber"></el-input>
 </el-form-item>

rules: {
        jobNumber: [
          { required: true, validator: checkJobNumber, trigger: 'blur' },
        ]
      },

var checkJobNumber = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('警员编号不能为空'))
  }
  setTimeout(() => {
    if (!Number.isInteger(+value)) {
      callback(new Error('请输入数字值'))
    } else {
      if (value.length === 6 ||  value.length === 7) {
        callback()
      } else {
        callback(new Error('请输入6-7位纯数字的警员编号'))
      }
    }
  }, 100)
}