VUE表单验证写法范例

最新推荐文章于 2024-04-27 06:29:28 发布

王世诣

最新推荐文章于 2024-04-27 06:29:28 发布

阅读量202

点赞数

分类专栏： VUE，前端前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/CSDNwangyi/article/details/129202899

版权

VUE，前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

文章介绍了如何在前端进行表单验证，通过在`el-form-item`中直接设置规则或者在数据对象`rules`中定义，使用正则表达式检查用户输入内容的正确性，确保如`dictCode`和`dictName`等字段符合特定格式要求。

摘要由CSDN通过智能技术生成

场景：提交表单时，前端判断下是否输入内容符合正则表达式。

//1.直接写在某个标签里
<el-form-item
:rules="{ required: dialogMsg.type == 'edit' ? true : false, transform: value => value && value.trim(), message: '请填写正确的修改理由' }">
//2.1写在大表单里
<el-form class="dict" :rules="rules">
	<el-form-item prop="dictName">
//2.2然后data里面写
            rules: {
                dictCode: [
                    {
                        required: true,
                        message: this.$t(''),
                        trigger: 'blur'
                    },
                    {
                        pattern: /^[A-Za-z0-9]{1,10}$/, //正则
                        message: this.$t('')
                    }
                ],
                dictName: [
                    {
                        required: true,
                        message: this.$t(''),
                        trigger: 'blur'
                    },
                    {
                        pattern: /^[\u4E00-\u9FA5A-Za-z0-9()]{1,30}$/, 
                        message:  this.$t('')
                    }
                ]
            },