这篇文章主要介绍了一套完整的通过权限控制参数的显示隐藏和校验方法。尤其适合多个相差不大的可复用模块的参数显示隐藏控制和参数提交校验。

1. 参数按权限显示动态校验规则

1.1 所有规则数组

1
2
3
4
5
6
7
8
// 所有规则可以写在一起，使用时按照权限获取对应的一个或几个规则
allRules: [
    {name: 'pdNm', required: true, reg: /^[A-Z]{4}$/, msg: '只能输入4个大写字母'}，
    {name: 'tel', reg: /^1[34578]\d{9}$/, msg: '手机号码不正确'}，
    {name: 'pdId', required: true, reg: null, msg: '产品id不能为空'}，
    {name: 'buyId', required: true, reg: null, msg: '买方id不能为空'}，
    {name: 'sellerId', required: true, reg: null, msg: '卖方id不能为空'}
]

1.2 权限对象

1
2
3
4
5
6
7
8
// 通过不同模块组成的数组下标作为权限，eg：let type = ['zk', 'rz', 'fp']
showRules: {
    pdNm: [0, 1], // 在zk和rz模块显示
    tel: [1, 2], // 在rz和fp模块显示
    pdId: [0, 1, 2], // 在所有模块显示
    buyId: [0, 2],
    sellerId: [0, 2],
}

1.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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// 存放需要在当前模块显示的
let pamSet = new Set()

// 切换模块时获取当前模块参数校验规则
let curRules = getCurPamRules(allRules)

// 根据权限设置当前模块需要展示的set参数集合
function setShowPams(obj, typeIdx){
    pamSet.clear();
    for(let k in obj){
        if(obj.hasOwnProperty(k)){
            if(obj[k].includes(typeIdx)){
                pamSet.add(k)
            }
        }
    }
}

// 从所有规则中获取当前展示参数的校验规则
function getCurPamRules(allRules){
    let arr = []
    allRules.forEach(item => {
        if(pamSet.has(item].name)){
            arr.push(item)
        }
    })
    return arr
}

// 根据参数set集合判断是否显示当前参数
function isShowCurPam(s){
    return pamSet.has(s)
}

// 校验参数，返回校验信息，校验成功返回null
function validPamCbMsg(obj, rules){
    let msg = null
    if(!rules.length || rules.length === 0) reutrn null
    for(let i = 0; i < rules.length; i++){
        let item = rules[i]
        if(item.reg !== null){ // 有规则分是否必输
            if(item.required){
                if(isEmpty(obj[item.name]) || !(item.reg.test(obj[item.name]))){
                	msg = item.msg
                    break
                }
            }else{
                if(!isEmpty(obj[item.name]) && !(item.reg.test(obj[item.name]))){
                	msg = item.msg
                    break
                }
            }
        }else{ // 无规则为必输项
            if(isEmpty(obj[item.name])){
                msg = item.msg
                break
            }
        }
    }
    return msg
}

1.4 使用

  • 在HTML中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <Col span="12" v-if="isShowCurPam('pdNm')">
       <FormItem label="产品名称" >
           <Input v-model="param.pdNm" clearable placeholder="支持模糊查询" class="search-input" />
       </FormItem>
    </Col>
    <Col span="12" v-if="isShowCurPam('tel')">
       <FormItem label="手机号码" >
           <Input v-model="param.tel" clearable placeholder="支持模糊查询" class="search-input" />
       </FormItem>
    </Col>
    ...

  • 提交数据时

    1
    2
    3
    4
    5
    6
    function submitFn(){
        let msg = null
        mag = validPamCbMsg(this.param, this.curRules)
        if(msg) return msg
        ...
    }

2 总结

  • 该方法和validator的Form表单校验比较，代码量较多，优点能根据每个参数进行提示，能兼容不同浏览器，该方法使用原因是为了解决 validator在ie11下校验参数时输入框不能正常显示而来的。