antdv 表单验证的几种方法_a-form-model-item的表单验证

拒绝废话

template

<a-form-model
    ref="ruleForm"
    :model="form"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
 >
    <a-form-model-item ref="name" label="Activity name" prop="name">
         <a-input v-model="form.name" />
    </a-form-model-item>
</a-form-model>
1
2
3
4
5
6
7
8
9
10
11

一、正常验证规则

export default {
    data() {
        return {
            form: {
                name: ''
            },
            rules: {
                name: [
                    { required: true, message: 'Please input Activity name', trigger: 'blur' },
                    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
                ]
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

二、接入正则表达式

export default {
    data() {
        return {
            form: {
                name: ''
            },
            rules: {
                name: [
                    { required: true, message: 'Please input Activity name', trigger: 'blur' },
                    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
                    { pattern: new RegExp(/^[A-Za-z]+$/), message: 'Please input Activity name', trigger: ['change', 'blur'] }
                ]
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

三、自定义校验规则

3.1 第一种写法

export default {
    data() {
        let checkName = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('Please input Activity name'));
            } else {
                callback();
            }
        }
        
        return {
            form: {
                name: ''
            },
            rules: {
                name: [
                    { validator: checkName, trigger: 'change' }
                ]
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3.2 第二种写法

<!--template-->
<a-form-model ref="ruleForm" :model="ruleForm" :rules="rules">
</a-form-modal>
<a-form-model-item 
    ref="name" 
    label="Activity name" 
    prop="name"
    :rules="validateField('name')"
>
    <a-input v-model="form.name" />
</a-form-model-item>

<!--script-->
export default {
    methods: {
        validateField(name = '') {
            return {required: true, message: `Please input Activity ${name}`, trigger: 'blur'}
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3.3 第三种写法

<!--template-->
<a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout"></a-form-modal>
<a-form-model-item 
    ref="name" 
    label="Activity name" 
    prop="name"
    :rules="validateField('name')"
>
    <a-input v-model="form.name" />
</a-form-model-item>

<!--script-->
export default {
    methods: {
        validateField(name = '') {
            return [
                {validator: this.validatorRules, trigger: 'blur'}
            ]
        },
        validatorRules(rule, value, callback) {
            if (!value) {
                callback(new Error('Please input Activity name'))
            } else {
                callback()
            }
        }
    }
}
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

最后

我司的FinOps产品基于Azure OpenAI、PGVector提供企业私有智能助手解决方案。该解决方案包括私有知识库、私有智能客服、云专家和运维专家等功能，旨在为客户提供更快速、便捷的服务和支持。通过利用人工智能和自然语言处理技术，联蔚的FinOps产品能够帮助企业进行云消费的全生命周期管理，从而极大地节省云支出并提升效率。
如果有云上财务管理、企业私有智能助手的需求，可以关注我们的微信公众号、详情查看联蔚盘云官网。
相关链接：
联蔚FinOps平台全新升级：资源优化报告与华为云助您智慧管理多云环境
联蔚盘云成为Gartner《Cool Vendors in Cloud》报告中亚洲唯一云服务商
Azure OpenAI助力联蔚盘云企业智能助手全面上线，引领智能化转型新纪元
联蔚荣获微软Azure OpenAI 合作伙伴 Level 300 认证
阿里云资源优化正式上线！最大程度节约成本，提升业务效能！