vue+iview的form表单校验总结

Posted 2022-06-28 codebook

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

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

<!--注意: ref/rules/model/prop等属性是必须的-->
<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))
    )