iview表单验证

分类

Form 组件基于 async-validator 实现的数据验证，给 Form 设置属性 rules，同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。

一、统一放在一个文件

组件

html：

    
        
    

确认

js:

// 验证的文件，放在一个文件中统一管理
import validate from '@/utils/validate'

data () {
    return {
        addCityClass: {
            className: ''
        },
        ruleAddCityClass: validate,
    }
},
methods: {
    methodAddCityClass() {
        // 这里一定要写，只有验证通过后才会执行
        this.$refs['refAddCityClass'].validate(valid => {
            if (valid) {
                // 如果验证通过，执行的一些操作，比如调接口等
            } else {
                // 如果验证不通过执行的一些操作
            }
        })
    },
}

validate.js

const validateNameZh = (rule, value, callback) => {
    if (value.trim() === '') {
        return callback(new Error('请输入名称'))
    } else if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value)) {
        return callback(new Error('请输入中英文数字下划线，不能输入特殊字符'))
    } else {
        callback()
    }
}
// 这里可以继续写其他验证规则
const validate = {
    className: [
        {
            required: true,
            validator: validateNameZh,
            trigger: 'blur'
        }
    ],
    // 这里可以继续写其他要验证的字段
}
export default validate

二、放在各自的组件中

组件

html：

    
        
    

确认

js:
可以放在script标签引入文件的下面

const validateNameZh = (rule, value, callback) => {
    if (value.trim() === '') {
        return callback(new Error('请输入名称'))
    } else if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value)) {
        return callback(new Error('请输入中英文数字下划线，不能输入特殊字符'))
    } else {
        callback()
    }
}

data () {
    return {
        addCityClass: {
            className: ''
        },
        ruleAddCityClass: {
            className: [
                {
                    required: true,
                    validator: validateNameZh,
                    trigger: 'blur'
                }
            ],
            // 这里可以继续写其他要验证的字段
        }
    }
},
methods: {
    methodAddCityClass() {
        this.$refs['refAddCityClass'].validate(valid => {
            if (valid) {
                // 如果验证通过，执行的一些操作，比如调接口等
            } else {
                // 如果验证不通过执行的一些操作
            }
        })
    },
}

其他问题

在Modal模态框中使用表单的话验证不生效

解决办法：使用模态框的自定义页脚，关闭按钮等，在方法调用后先进行验证，验证通过后进行其他操作，随后把模态框关闭。
html：

    
 
        
            
        
    
    

        取消
        确认
    

js：

ok () {
    this.$refs['refSet'].validate(valid => {
        if (valid) {
            // 在其他操作(调接口等)完成后，将模态框关闭
            this.setModal = false
        }
    })
},
cancel () {
    this.setModal = false
},

数字验证不生效

{type: 'number', message: '请输入数字', trigger: 'blur'}

上面这种验证方式是不生效的，即使生效也会出现其他问题（当不止验证数字时，同时验证不为空等）
解决办法：使用自定义验证方式

const validateNumber = (rule, value, callback) => {
    if (value.trim() === '') {
        return callback(new Error('不能为空'))
    } else if (!/^[0-9]*$/.test(value)) {
        return callback(new Error('请输入数字'))
    } else {
        callback()
    }
}

number: [{ required: true, trigger: 'blur', validator: validateNumber }],

网站导航

网站导航