ElementUI的表单验证及常用规则

最新推荐文章于 2024-05-09 10:10:26 发布
最新推荐文章于 2024-05-09 10:10:26 发布
阅读量678 收藏 1
点赞数
原文链接：https://www.jianshu.com/p/d71dc34193b4
版权

http://element-cn.eleme.io/#/zh-CN/component/form
在官网上有关于form组件的详细介绍
这里总结了几个常用的规则，方便下次使用
必填，必选，邮箱，手机号，时间，数字，数组，字符长度，
以邮箱为例子与手机号为例

//这是一个邮箱的验证规则
rules: {
    email: [{
            required: true,//是否必填
            message: '请输入邮箱地址',//错误提示信息
            trigger: 'blur'//检验方式（blur为鼠标点击其他地方，）
        },
        {
            type: 'email',//要检验的类型（number，email，date等）
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']（change为检验的字符变化的时候）
        }
    ]，
  phone: [{
        required: true,
        pattern: /^1[34578]\d{9}$/,//可以写正则表达式呦呦呦
        message: '目前只支持中国大陆的手机号码',
        trigger: 'blur'
    }],
}

验证实例

这是代码，直接复制到html文件打开即可
也可以使用此链接中的rules.js的方式，日常积累一些，直接引用即可
https://www.jianshu.com/p/6a29e9e51b61
此文中还写了QQ，身份证等验证方式

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>

    <body>
        <div id="app">
            <el-row>
                <el-col :span="12" :offset="6">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="活动名称" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="客户邮箱" prop="email">
                            <el-input v-model="ruleForm.email"></el-input>
                        </el-form-item>
                        <el-form-item label="客户年龄" prop="age" prop='age'>
                            <el-input type="age" v-model.number="ruleForm.age" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="活动区域" prop="region">
                            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="活动时间" required>
                            <el-col :span="11">
                                <el-form-item prop="date1">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11">
                                <el-form-item prop="date2">
                                    <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="活动性质" prop="type">
                            <el-checkbox-group v-model="ruleForm.type">
                                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                                <el-checkbox label="地推活动" name="type"></el-checkbox>
                                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="特殊资源" prop="resource">
                            <el-radio-group v-model="ruleForm.resource">
                                <el-radio label="线上品牌商赞助"></el-radio>
                                <el-radio label="线下场地免费"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>

        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data() {
                    return {
                        age: '',
                        ruleForm: {
                            name: '',
                            region: '',
                            date1: '',
                            date2: '',
                            delivery: false,
                            type: [],
                            resource: '',
                            desc: '',
                            email: '',
                            age: '',
                        },
                        rules: {
                            age: [{
                                    required: true,
                                    message: '年龄不能为空'
                                },
                                {
                                    type: 'number',
                                    message: '年龄必须为数字值'
                                },
                                
                            ],
                            email: [{
                                    required: true,
                                    message: '请输入邮箱地址',
                                    trigger: 'blur'
                                },
                                {
                                    type: 'email',
                                    message: '请输入正确的邮箱地址',
                                    trigger: ['blur', 'change']
                                }
                            ],
                            name: [{
                                required: true,
                                message: '请输入活动名称',
                                trigger: 'blur'
                            }],
                            region: [{
                                required: true,
                                message: '请选择活动区域',
                                trigger: 'change'
                            }],
                            date1: [{
                                type: 'date',
                                required: true,
                                message: '请选择日期',
                                trigger: 'change'
                            }],
                            date2: [{
                                type: 'date',
                                required: true,
                                message: '请选择时间',
                                trigger: 'change'
                            }],
                            type: [{
                                type: 'array',
                                required: true,
                                message: '请至少选择一个活动性质',
                                trigger: 'change'
                            }],
                            resource: [{
                                required: true,
                                message: '请选择活动资源',
                                trigger: 'change'
                            }],
                        }
                    };
                },
                methods: {
                    submitForm(formName) {
                        this.$refs[formName].validate((valid) => {
                            if(valid) {
                                alert('submit!');
                            } else {
                                console.log('error submit!!');
                                return false;
                            }
                        });
                    },
                    resetForm(formName) {
                        this.$refs[formName].resetFields();
                    }
                }
            });
        </script>
    </body>

</html>

ElementUI的表单验证(二)之dialog关闭验证https://www.jianshu.com/p/473141679ce4

 

Kimser
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue elementui form表单验证的实现
10-17
主要介绍了vue elementui form表单验证的实现,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用ElementUI自带的DatePicker 日期选择器，加入验证类型为 type=“date“时报错
wozouludaifeng的博客
06-04 2386
首先说明出现原因，elementUI的日期选择器【el-date-picker】在加上格式 value-format=“yyyy-MM-dd” format=“yyyy-MM-dd” 和校验规则时 { type: ‘date’, required: true, message: ‘请选择日期’, trigger: ‘change’ } 由于加入了type=“date”,导致上述的错误 解决方式: 将type改为“string"或者直接删除这一项 原因可能是：elementUI自带的格式转换后会将绑定值转为.
Element ui 表单验证触发方式：trigger的两种选项
pHoSpHeneS80的博客
12-06 3822
Element ui 表单验证触发方式：trigger
Element UI 表单验证详解与实践
最新发布
一起coding，一起嗨。
05-09 1107
Element UI 表单验证详解与实践
Vue系列之—Element UI 表单自定义效验规则
热门推荐
zhou139856的博客
07-03 1万+
介绍Vue项目中表单验证规则使用和常见验证方法
ElementUI rules全功能介绍，同时也适用于avue中
经验之谈，不做搬运工
03-27 1932
ElementUI组件库中表单校验默认使用的是async-validator，所以要了解ElementUI表单验证的rules规则，先了解async-validator。type String，表示该项的数据类型，不符合类型要求，则验证不通过，显示错误信息。 支持的类型如下： string: String类型，这是默认值。 number: Number类型，包含整数和小数。 integer： 整数。 float：小数，此时不能为整数，必须有小数点。 boolean：Boolean类型，true/fals
vue3国际化语言设置及表单组件封装
XMCYD的博客
06-16 617
国际化语言设置，多语言表单组件封装
vue+elementUI实现表单和图片上传及验证功能示例
10-17
主要介绍了vue+elementUI实现表单和图片上传及验证功能,结合实例形式分析了vue+elementUI表单相关操作技巧,需要的朋友可以参考下
Vue ElementUI之Form表单验证遇到的问题
08-29
Vue ElementUI之Form表单验证遇到的问题 Vue ElementUI是一个基于Vue.js的组件库，提供了许多实用的UI组件，其中Form表单验证是一个常见的问题。本文将主要介绍Vue ElementUI之Form表单验证遇到的问题，并提供解决...
实现elementUI表单的全局验证的方法步骤
10-17
4. 应用生成的验证规则到表单组件上，并结合Element UI API进行验证操作。 通过这种方式，我们可以有效地减少代码重复，提升代码的可维护性和可扩展性。在实际开发中，还可以根据项目需求进一步优化和扩展验证机制...
vue elementUI 表单嵌套验证的实例代码
10-16
Vue.js和Element UI是开发Web应用的常用工具，它们提供了丰富的功能，包括强大的表单处理和验证机制。在本文中，我们将深入探讨如何在Vue.js和Element UI中实现表单的嵌套验证。 首先，我们要了解一级表单验证。...
vue校验
qq_39869537的博客
03-19 395
<Form :model="data" :rules="ruleValidate" ref="userForm" :label-width="80"> <FormItem label="姓名" :rules="{required: true, message: '必填',trigger: 'blur'}" autofocus prop="fullname"> <I...
Element表单验证规则
dengke2247的博客
12-21 819
一、简单的逻辑验证使用方法： 方法步骤： 1、在html中给el-form增加:rules="rules" 2、html中在el-form-item 中增加属性prop="名称" 3、js中直接在data中定义rules:{} 在html中的写法： <el-form ref="formData" :rules="rules" :model="formData" ...
Element UI Form表单表单验证触发方式 trigger: ‘change‘ 和trigger: ‘blur‘区别
weixin_65921319的博客
05-05 5364
备注：没有进行任何输入时，不会触发change，但一定会触发blur事件。二、 trigger: ‘blur’:失去焦点时触发,如上图。一、 trigger: ‘change’:数据改变时触发。
vue 组件 not defined_vue基础知识学习笔记（三）
weixin_39840733的博客
11-30 786
对element-ui 中 form学习form表单中有自带的验证规则注意不同的框对应不同的trugger值 rules: { // 对普通输入框不能 为空输入限制输入个数 name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message:...
elementui表单规则校验
weixin_45944877的博客
06-08 4253
elementui表单校验规则
Element UI 表单【详解】-- 表单校验
coldriversnow的专栏
07-18 1万+
callback(new Error('必须年满18岁'));rules: {// 是否必填 没有这个就没有前面红点// 自定义验证规则// 触发事件},
Element中再标签中动态rules验证输入框的值 可以写很多条件的 rules数组
meiwan123的博客
04-28 2459
<el-form-item class="formaddym" v-for="(domain, index) in orgForm.domains" :label="index == 0 ? '锚节点信息' : ''" :key="domain.key" :prop="'domains.' + index + ...
el-form表单验证
weixin_51153786的博客
07-03 886
表单验证的步骤，表单验证的具体实现，如何实现聚焦时错误信息消失。
elementui表单验证
09-05
Element UI 提供了一套强大的表单验证机制，可以帮助开发者快速实现表单验证功能。下面是一个简单的示例，演示如何使用 Element UI 进行表单验证： 首先，确保你已经安装了 Element UI，并在项目中正确引入了相关的样式和组件。 然后，在你的 Vue 组件中，使用 `<el-form>` 和 `<el-form-item>` 组件包裹你的表单元素，并在需要进行验证的表单元素上添加 `prop` 属性指定该表单元素的唯一标识符。 接下来，通过添加规则对象，定义每个表单元素的验证规则。你可以通过 `rules` 属性传入一个对象，对象的键是表单元素的 `prop` 值，值是一个数组，数组中的每个对象表示一个验证规则。 最后，在提交表单时，可以通过调用 `<el-form>` 组件的 `validate` 方法来触发表单验证，如果验证通过，则执行相应的提交操作。 以下是一个示例代码： ```vue <template> <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' } ] } } }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过，执行提交操作 // ... } else { // 表单验证未通过 return false; } }); } } } </script> ``` 以上示例中，我们定义了一个包含用户名和密码的表单，为每个表单元素定义了相应的验证规则。在提交表单时，调用 `validate` 方法进行表单验证，如果验证通过，则可以执行提交操作。 这只是一个简单的示例，Element UI 还提供了更多的验证规则和自定义验证方法，可以根据具体需要进行配置。详细的文档可以参考 Element UI 官方文档中的表单验证部分。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值