iview表单验证之正则验证、函数验证

最新推荐文章于 2024-08-16 10:01:13 发布

转载最新推荐文章于 2024-08-16 10:01:13 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/s313139232/p/11021937.html

本文详细介绍了在iView UI框架中如何使用正则表达式进行表单字段的验证，包括验证字段是否为空、是否为整数，以及如何通过自定义函数实现更复杂的验证逻辑，如检查数值范围的有效性。

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

iview表单验证之正则

正则验证：

代码：

loginRules: {
        stringLength: [
          { required: true, message: '该字段不能为空', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '该字段为整数', trigger: 'blur' }
        ]
}

函数验证：

1.首先在data中定义验证方法

data () {
    const validateMax = (rule, value, callback) => {
      if (this.formItem.min !== undefined && this.formItem.max !== undefined && this.formItem.min !== '' && this.formItem.max !== '') {
        if (this.formItem.min * 1 > this.formItem.max * 1) {
          callback(new Error('最大值必须大于最小值'))
          this.$refs.FormRef.validateField('min') // iviewForm方法，验证min
        } else {
          callback()
          this.$refs.FormRef.validateField('min')
        }
      } else {
        callback()
      }
    }
    const validateMin = (rule, value, callback) => {
      if (this.formItem.min !== undefined && this.formItem.max !== undefined && this.formItem.min !== '' && this.formItem.max !== '') {
        if (this.formItem.min * 1 > this.formItem.max * 1) {
          callback(new Error('最小值必须小于最大值'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
}

2.在表单验证中插入验证

/* 表单验证 */
      loginRules: {
        max: [
          { pattern: /^-?[1-9]\d*$/, message: '该字段只能是整数', trigger: 'blur' },
          { validator: validateMax, trigger: 'blur' }
        ],
        min: [
          { pattern: /^-?[1-9]\d*$/, message: '该字段只能是整数', trigger: 'blur' },
          { validator: validateMin, trigger: 'blur' }
        ]
}

钻研不易，转载请注明出处......

转载于:https://www.cnblogs.com/s313139232/p/11021937.html