element UI 自定义校验规则写法

最新推荐文章于 2024-05-10 10:04:27 发布

黑暗中跳舞的月亮

最新推荐文章于 2024-05-10 10:04:27 发布

阅读量737

点赞数

分类专栏： VUE Js 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/Seven_Amber/article/details/112304892

版权

VUE 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

例：校验 number(22,12) 类型的必填数据。【ps：好像可以改成接收参数，把整数、小数位数作为入参就可以通用了，回头再看吧，先记录到这儿。如有错误，欢迎指正】

<template>

</template>

<script>
export default {
  data () {
    let numSpValid = (rule,value,callback)=>{
      if(value){
        const integerNum = 10 // 整数位数
        const decimalNum = 12 // 小数位数
        let pointIndex = value.indexOf('.') // 获取小数点位置
        if(pointIndex !== -1){ // 有小数点
          //拆成两段判断
          let starStr = value.substr(0,pointIndex)
          let endStr = value.substr(pointIndex+1)
          if( (starStr.length > integerNum) || (endStr.length > decimalNum) ) {
            callback(new Error('整数位数不可超过'+integerNum+'位，小数位数不超过'+decimalNum+'位'))
          } else {
            callback()
          }
        } else { // 无小数点
          if(value.length>integerNum){
            callback(new Error('整数位数不可超过'+integerNum+'位，小数位数不超过'+decimalNum+'位'))
          } else {
            callback()
          }
        }
      } else {
        callback()
      }
    }
    return {
      formData: {
        myData: '' // 待验证数据 必填  类型：number（22，12）
      },
      // 校验规则
      rules: {
        myData: [
          { validator: validates.validateNum, trigger: 'change'},
          { validator: numSpValid, trigger: 'change'}
        ]
      }
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>

</style>