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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--注意: 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.添加校验规则

1
2
3
4
5
6
7
8
9
10
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.校验方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 校验输入的字符长度
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字段，显示的时候是必输项，隐藏的时候是非必输的，这个时候需要动态的修改校验规则

1
2
3
4
5
6
7
8
9
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.异步校验

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

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

6.组件模板传值校验

使用<component>实现动态模板时，可能有多层页面嵌套，导致表单校验监听不到，此时可以使用在子组件检验然后将校验好的结果传递给父组件。

1
2
<!--父组件-->
<component ref="fatherComRef" :is="liveModal"></component>
1
2
3
4
5
6
// 子组件中写当前页面表单的校验方法
sonValidate: function(cb){
    this.$refs['sonComRef'].validate(valid=>{
        cb(valid)
    })
}
1
2
3
4
5
6
// 父组件接收传过来的校验结果，注意父组件不需要引入这个sonValidate方法，直接使用就行了
this.$refs['fatherComRef'].sonValidate(valid=>{
    if(valid){
        // do something
    }
})