element-ui 表单常用验证(正整数,价格)

数量:(请输入1-999的正整数)

// 只是截取表单里的item,如果看不懂只能证明你菜得无药可救咯。
<el-form-item
  :prop="'form.number" 
  :rules="numberRule">
  <el-input type="text" v-model.number="form.number"></el-input>
</el-form-item>
// data部分
numberRule: [
 { required: true, message: '请输入', trigger: 'blur' },
 {
  validator(rule, value, callback) {
   if (Number.isInteger(Number(value)) && Number(value) > 0 && Number(value) < 999) {
     callback()
    } else {
      callback(new Error('请输入1-999的正整数'))
    }
   },
   trigger: 'blur'
 }
]

原先使用了正则,可能是正则不够变态,反正例如空数组,空对象,null,undefined,NaN验证不了,然后验证不了000,这是我正则的问题,不过反正我最后推翻了正则,网上还有使用正整数除以1一定会整除来做,也就是 number%1 === 0。可是还是有缺陷因为还得判断特殊符号和英文字母,你得确定是数字才行,所以得再加一层。最后我都推翻了,为了跟上潮流!使用es6的isInteger()方法。Number.isInteger()用来判断一个值是否为整数。

价格:(大于零小于十万不超过三位小数)

// 只是截取表单里的item,如果看不懂只能证明你菜得无药可救咯。
<el-form-item
  :prop="'form.price" 
  :rules="priceRule">
  <el-input type="text" v-model.number="form.price"></el-input>
</el-form-item>
// data部分
priceRule: [
  { required: true, message: '请输入', trigger: 'blur' },
  {
    validator(rule, value, callback) {
      var reg = /^-?\d{1,5}(?:\.\d{1,3})?$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('请输入大于零小于十万不超过三位小数的数字'))
      }
    },
    trigger: 'blur'
  }
],

使用了正则,记住很多人喜欢用match()方法,建议放弃使用test方法。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一直想写这么个玩意儿的,一直没有能排起头。今天刚好测试测出一个bug,是一个关于正整数的表单验证。 项目需求:附件...
    锋叔阅读 7,791评论 3 2
  • 一直想写这么个玩意儿的,一直没有能排起头。今天刚好测试测出一个bug,是一个关于正整数的表单验证。 项目需求:附件...
    锋叔阅读 4,517评论 1 1
  • 1 Object 对象 教程:https://wangdoc.com/javascript/stdlib/obje...
    智勇双全的小六阅读 2,544评论 0 0
  • 三,字符串扩展 3.1 Unicode表示法 ES6 做出了改进,只要将码点放入大括号,就能正确解读该字符。有了这...
    eastbaby阅读 1,683评论 0 8
  • //// NSObject+YYModel.h// YYModel https://github.com/ib...
    晓丶维阅读 316评论 0 0

友情链接更多精彩内容