ElementUI的表单验证及常用规则

最新推荐文章于 2023-07-18 14:27:46 发布
最新推荐文章于 2023-07-18 14:27:46 发布
阅读量720 收藏 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
关注
vue elementui form表单验证的实现
10-17
6. 还可以在全局范围内注册可复用的验证方法，将常用的验证规则封装成工具函数，在表单验证时调用。 具体到实现代码，可以参照文档给出的示例： ```javascript :model="dynamicValidateForm" ref=...
使用ElementUI自带的DatePicker 日期选择器，加入验证类型为 type=“date“时报错
wozouludaifeng的博客
06-04 2463
首先说明出现原因，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 3986
Element ui 表单验证触发方式：trigger
Vue系列之—Element UI 表单自定义效验规则
热门推荐
zhou139856的博客
07-03 1万+
介绍Vue项目中表单验证规则使用和常见验证方法
ElementUI rules全功能介绍，同时也适用于avue中
经验之谈，不做搬运工
03-27 2009
ElementUI组件库中表单校验默认使用的是async-validator，所以要了解ElementUI表单验证的rules规则，先了解async-validator。type String，表示该项的数据类型，不符合类型要求，则验证不通过，显示错误信息。 支持的类型如下： string: String类型，这是默认值。 number: Number类型，包含整数和小数。 integer： 整数。 float：小数，此时不能为整数，必须有小数点。 boolean：Boolean类型，true/fals
vue3国际化语言设置及表单组件封装
XMCYD的博客
06-16 719
国际化语言设置，多语言表单组件封装
vue elementUI 表单嵌套验证的实例代码
10-16
Element UI的`el-form`组件允许我们通过`model`和`rules`属性来实现表单验证。`model`用于绑定表单数据，而`rules`则定义了验证规则。例如，以下代码展示了如何验证"客户名称"字段： ```html 客户名称:" size=...
详解element-ui中表单验证的三种方式
10-16
本文将详细介绍Element-UI中表单验证的三种常用方式，并通过示例代码进行说明。 首先，Element-UI提供的表单验证功能是与Vee-Validate类似的，都支持同步验证、异步验证以及自定义验证规则。下面将逐一讲解这三种...
Vue+Element实现动态生成新表单并添加验证功能
10-16
在Vue.js框架中与Element UI组件库结合实现动态表单生成以及表单验证是一个相当实用的技术应用场景。本文主要阐述了如何使用Vue.js和Element UI来实现表单的动态生成，并为这些动态生成的表单添加了验证功能。 知识...
详解element-ui 表单校验 Rules 配置 常用黑科技
12-28
指示type要使用的验证器。可识别的类型值为： string：类型必须为string。type 默认是 string // 校验 string: [ {type: 'string', message: `请输入字符串`, trigger: 'blur'} ] 测试字段 prop=string> 请输入> ...
vue校验
qq_39869537的博客
03-19 456
<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 854
一、简单的逻辑验证使用方法： 方法步骤： 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 表单【详解】-- 表单校验
最新发布
coldriversnow的专栏
07-18 1万+
callback(new Error('必须年满18岁'));rules: {// 是否必填 没有这个就没有前面红点// 自定义验证规则// 触发事件},
vue 组件 not defined_vue基础知识学习笔记（三）
weixin_39840733的博客
11-30 808
对element-ui 中 form学习form表单中有自带的验证规则注意不同的框对应不同的trugger值 rules: { // 对普通输入框不能 为空输入限制输入个数 name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message:...
Element UI Form表单表单验证触发方式 trigger: ‘change‘ 和trigger: ‘blur‘区别
weixin_65921319的博客
05-05 5733
备注：没有进行任何输入时，不会触发change，但一定会触发blur事件。二、 trigger: ‘blur’:失去焦点时触发,如上图。一、 trigger: ‘change’:数据改变时触发。
elementui表单规则校验
weixin_45944877的博客
06-08 4496
elementui表单校验规则
el-form表单验证
weixin_51153786的博客
07-03 1060
表单验证的步骤，表单验证的具体实现，如何实现聚焦时错误信息消失。
Element中再标签中动态rules验证输入框的值 可以写很多条件的 rules数组
meiwan123的博客
04-28 2490
<el-form-item class="formaddym" v-for="(domain, index) in orgForm.domains" :label="index == 0 ? '锚节点信息' : ''" :key="domain.key" :prop="'domains.' + index + ...
Element-UI中的表单验证
yhang0802的博客
07-03 1万+
Element-UI中的表单验证
vue+elementUI表单及图片上传验证实战教程
Vue.js和ElementUI是前端开发中的常用组合，ElementUI提供了丰富的组件库，包括表单组件，使得开发表单变得简单。以下将详细阐述实现这些功能的关键步骤和注意事项： 1. **表单验证** - 使用`el-form`组件创建表单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值