vue+iview的form表单校验总结

川长思鸟来 2023-08-17 17:48 143阅读 0赞

这篇文章时关于如何使用iview的form表单校验。主要学习如何使用form校验（以校验文字长度为例），以及如何动态添加校验规则和异步校验。

## 1.为需要校验的表单添加form标签 ##

<Form res="foemRef" :rules="formRules" :model="formData" v-if="liveNode">
        <Row>
            
            <Col>
                <FormItem prop="name">
                    <Input v-model="formData.name"></Input>
                </FormItem>
            </Col>
            
            <Col v-if="flag">
                <FormItem prop="age">
                    <Input v-model="formData.age"></Input>
                </FormItem>
            </Col>
            
            <Col>
                <FormItem prop="asyName">
                    <Input v-model="formData.asyName"></Input>
                </FormItem>
            </Col>
        </Row>
    </Form>

## 2.添加校验规则 ##

formRules: {
        name: [
            {required: true, message: "必输项不能为空", trigger: 'blur'},
            {validator:(rule, value, cb)=>{lenValid(value, 30, cb)}, trigger: 'blur'}
        ],
        age:[], // 注意因为age是根据条件判断是否必输，先留个坑
        asyName: [ // 异步校验，使用change触发，即使不改变输入数据也会在提交数据的时候自动校验一次
            {validator:(rule, value, cb)=>{asyValid(value, cb)}, trigger: 'change'}
        ]
    }

## 3.校验方法 ##

// 校验输入的字符长度
    function lenValid(str, num, cb){
        if(str){
            let len = getLen(str)
            if(len > num){
                return cb(new Error('Too Long...'))
            }
        }
        cb()
    }
    
    // 获取字符长度
    function getLen(str){
        let len = 0
        if(str){
            str = str + '' // to string
            for(let i=0; i<str.length; i++){
                let c = str.charCodeAt(i)
                if((c >= 0x0001 && c <= 0x007e) || (0xff60 < = c && c <= 0xff9f)){
                   len++ // 单字节
                }else{
                    len += 3 // 汉字
                }
            }
        }
        return len
    }

## 4.动态添加校验规则 ##

有时候需要动态切换一个输入框，比如：上面的age字段，显示的时候是必输项，隐藏的时候是非必输的，这个时候需要动态的修改校验规则

this.liveNode = flase // 先抹去Form，等校验规则修改后在重新渲染
    if(this.flag){
       this.formRules.age.unShift({required: true, message: '必输项'})
    }else{
        if(this.formRules.age.length > 0){
            this.formRules.age.shift()
        }
    }
    this.liveNode = true // 重新渲染Form

## 5.异步校验 ##

有时候输入的内容需要到后台异步校验

// 异步校验 - 成败都要有回调函数，校验失败抛出异常
    function asyValid(value, cb){
        let param = {asyName: value} // 将需要校验的值作为参数
        $http(url,action,param,(res)=>{
            cb()
        },(err)=>{
            cb(new Error(err.data.message))
        })
    }

转载于:https://www.cnblogs.com/codebook/p/11332824.html