elemeng-ui 中el-form 表单校验

最新推荐文章于 2023-12-13 16:43:55 发布
最新推荐文章于 2023-12-13 16:43:55 发布
阅读量285 收藏
点赞数
文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48456818/article/details/117667147
版权

如图，我们以一个要求输入年龄的表单举例

其在代码中的体现为：

<el-form-item
    label="年龄"
    prop="age"
    :rules="[
      { required: true, message: '年龄不能为空', trigger: 'blur'},
      { type: 'number', message: '年龄必须为数字值', trigger: 'blur'}
    ]"
  >

由上所示，该表单有一个rules属性，其值为一个数组，里边每一项为一个对象，包含着每一条校验规则

trigger:'blur意为当表单失去焦点时开始校验

message为当校验失败时的提示信息

当然，rules的值也可以是变量，在data中赋值也是可以的

Chir.t
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解element-ui中form验证杂记
01-19
最近接触的商户后台项目居多，自然而然就涉及到了大量的表单验证， 也就对一些常用的el-form表单验证和问题进行下梳理。 当我们添加required验证后，输入一些数据后再删除完时，会出现xxx is required，如下图所示 你可能很纳闷，已经为form表单传入了rules了啊，在不全部删除时，验证规则都没问题。这个问题是因为在html中使用了required字段，而在rules的规则没有设置required为true， // html <el label=角色名称 prop=roleName> <el-input v-model=
el-form 多层级表单的实现示例
11-19
前言 ...el-form 使用，详情可参见： Form 表单 有几个比较重要的属性： ref 相当于标签的 id model 表单数据对象 rules 表单验证规则 prop 表单域 model 字段 label 标签文本 在提交按钮的
用前端渐进式Vue.js实现登录功能
weixin_46820017的博客
01-17 505
使用Vue实现简单的用户登录界面，登录成功以后查询账号用户类型进行相应的页面路由跳转，效果如下图所示： HTML部分： 登录
element-ui自定义非必填字段的格式校验
aaa123aaasqw的博客
04-06 420
element表单里非必填的字段需要校验格式时使用。
form 表单中number 类型的字段校验时，不能准备的进行校验
weixin_46852620的博客
02-08 488
解决办法：更新element UI 版本到v2.4以上，并且加上number 类型 rules={ phone: [ { required: true, message: '年龄不能为空' }, { type: 'number', message: '年龄必须为数字值' }, ] } 简单的校验，如必填、邮箱、日期、字段长度、数字。 数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。
Element-UI踩坑---部分表单校验失效,required=true,且栏位也出现了红色星号*,提交的时候有一部分栏位有校验一部分没有
DayDayUp4399的博客
06-27 668
在el-form-item 加上key, :key=“isShow+‘prop名称’” ,简单来说让变化后的key也发生改变,就能重新渲染,让校验恢复正常。原因: 大概是使用了v-if,v-show,三元表达式等,对校验的el-form-item做了动态的判定。
vue校验
qq_39869537的博客
03-19 370
<Form :model="data" :rules="ruleValidate" ref="userForm" :label-width="80"> <FormItem label="姓名" :rules="{required: true, message: '必填',trigger: 'blur'}" autofocus prop="fullname"> <I...
required: true, message: ‘请输入活动名称‘
iang_520的博客
11-07 929
required: true, message: '请输入活动名称'
element-ui react Form 组件校验规则required=true失败
weixin_42052388的博客
05-06 4145
出现的错误required = true时，即使表单输入框有值，也会报错问题原因element-ui form校验通过async-validate实现，async-validate默认检验内容type=string，而此时我们输入框值为后台返回的Int (js里是 number)解决方法每个规则项加入 type  类型...
element form表单验证（数字，手机号，邮箱）
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
04-16 1万+
<template> <div class="hello"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="名称" prop="na...
正则表达式校验年龄
sunshine的博客
11-28 2万+
用正则表达式校验年龄吗，此处校验的规章是数字并且在1-120之间，代码如下： validateAge = (rule, value, callback) =&gt; { console.log("value年龄的值",value); let reg=/^(?:[1-9][0-9]?|1[01][0-9]|120)$/;//年龄是1-120之间有效 if(value ==...
详解element-ui 表单校验 Rules 配置 常用黑科技
12-28
type 指示type要使用的验证器。可识别的类型值为： string：类型必须为string。... <el v-model.number=form.string placeholder=请输入></el> </el> number：类型必须为number。 // 校验 number:
vue element el-form多表单验证.txt
09-17
在使用element-ui，想要多个表单同时验证时，可以使用promise的方法进行异步验证取得结果后再进行操作
el-form-schema
04-22
el-form-schema 是中后台表单解决方案，不仅覆盖了表单的布局、组件联动、校验等场景，还扩展支持 object、array、table 来满足更加复杂的业务场景，旨在让表单开发这件事情变的易用、简单、高效! Document vuepress...
elementui在不点击提交的时候校验表单内容
Ych_cxy的博客
09-05 1018
//表单规则 guding_rules: { endMonth:[ { required: true,validator: endMonth, trigger: 'blur' } ], }, //自定义表单规则...
ElementUI非必填正整数校验
最新发布
qq_34082921的博客
12-13 124
表单非必填，但是如果填写表单的话就要校验，不填写就不校验。
vue 登录提示
weixin_52098544的博客
10-30 112
{required:true,message:"请输入用户名",trigger:"blur"}{required:true,message:"请输入密码",trigger:"blur"}
Element-UI
qq_45859670的博客
05-17 487
Vee Validata官网
Vue中rules表单验证（常用）
热门推荐
lzzw的学习之路
11-19 4万+
vue的rules用法及自带的校验规则和常用正则表达式校验
element-ui中from表单校验
06-28
### 回答1： element-ui中的form表单校验可以通过以下步骤实现： 1. 在form表单中添加需要校验的表单项，例如： ``` <el-form :model="form" :rules="rules"> <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> ``` 2. 在data中定义form和rules对象，例如： ``` data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ] } } } ``` 3. 在methods中定义submit方法，例如： ``` methods: { submit() { this.$refs.form.validate((valid) => { if (valid) { // 表单校验通过，执行提交操作 } else { // 表单校验不通过，提示错误信息 } }); } } ``` 4. 在submit按钮中调用submit方法，例如： ``` <el-button type="primary" @click="submit">提交</el-button> ``` 以上就是element-ui中form表单校验的基本步骤。需要注意的是，校验规则可以根据实际情况进行自定义，例如添加正则表达式校验等。 ### 回答2： element-ui是一款基于Vue.js的UI框架，它提供了一系列常用的组件，其中包括表单组件。在element-ui中，表单组件使用from组件进行封装，其内置了表单校验的功能，可以方便地进行表单数据的检验和验证。 为了实现表单校验功能，在使用element-ui的from组件时需要对表单各项数据进行设定，包括表单数据的值，校验规则及提示信息等。element-ui提供了一种便捷的方式来对表单进行初始化，即通过配置项“rules” 来设置各项表单数据的校验规则和提示信息。例如： ``` <el-form ref="loginForm" :model="loginForm" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="loginForm.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="loginForm.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('loginForm')">登录</el-button> </el-form-item> </el-form> ``` 在上述代码中，我们通过配置项“rules”来设置了表单数据“username”和“password”的校验规则和提示信息，这些规则包括了必填项、长度、格式等。例如校验“username”项的规则如下： ``` rules: { username: [ { required: true, message: '请填写用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请填写密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ] } ``` 在设置完表单的rules之后，我们还需要编写校验逻辑。element-ui提供了一种简便的方式来触发表单校验，即通过调用from组件中的validate方法。在校验成功时，validate方法会返回一个Promise对象，因此我们可以按照以下方式来使用： ``` methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('提交成功'); } else { return false; } }); }, } ``` 在上述代码中，我们通过this.$refs[formName].validate()方法来触发表单校验，并在校验成功时弹出一个提交成功的提示框，否则返回false。同时，还可以通过validate方法的回调函数来进行其他的操作，例如在校验失败时显示错误提示信息。 总之，element-ui中的from表单校验是一种非常便捷的方式来对表单数据进行检验和验证，其提供了丰富的校验规则和提示信息，并通过validate方法和回调函数来实现表单校验的逻辑。 ### 回答3： element-ui是一款基于Vue.js的UI框架，提供了一系列方便开发人员快速构建美观易用的Web应用的组件。其中，form表单组件是经常使用的一个组件，实现了表单提交和校验的功能。下面对element-ui中from表单校验进行说明。 1. 校验规则定义 首先，需要定义表单中各个输入框的校验规则。element-ui提供了两种定义方式： （1）使用prop属性定义校验规则： 在组件中定义prop属性，该属性是一个包含校验规则的对象： <el-form :rules="rules"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> </el-form> 在js中定义rules： data() { return { rules: { name: [ { required: true, message: '请输入名称', trigger: 'blur' } ] } } } 其中，rules中的属性名必须和form-item组件的prop属性一致。规则数组中可以定义多个校验规则，常用的校验规则有： required：必填项。 email：必须是有效的邮箱。 url：必须是有效的URL。 max：输入值最大长度。 min：输入值最小长度。 pattern：自定义正则表达式。 （2）使用validate方法定义校验规则： 在组件中定义ref属性： <el-form ref="form" :model="form"> <el-form-item label="名称"> <el-input v-model="form.name" ref="name"></el-input> </el-form-item> </el-form> 使用validate方法设置校验规则： this.$refs.form.validate((valid) => { // valid为true则表示验证通过，否则验证失败 if (valid) { // 处理提交表单等操作 } else { return false; } }); 使用this.$refs.form.clearValidate()方法清除表单校验。 2. 触发校验 触发校验有两种方式：自动校验和手动校验。 （1）自动校验： 自动校验是通过在form组件中添加validate-on-change和validate-on-blur属性实现的： <el-form :rules="rules" ref="form" label-position="top" label-width="80px" :model="form" validate-on-change validate-on-blur> <el-form-item label="名称" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> </el-form> validate-on-change表示在输入框值发生变化时自动触发校验，validate-on-blur表示失去焦点时触发校验。 （2）手动校验： 手动校验是通过validate方法实现的，在需要手动校验的地方调用validate方法即可： this.$refs.form.validate((valid) => { // valid为true则表示验证通过，否则验证失败 if (valid) { // 处理提交表单等操作 } else { return false; } }); 在需要清除校验的地方调用this.$refs.form.clearValidate()方法即可。 3. 校验提示 element-ui提供了一种方便的方式来显示校验提示，即在form-item组件中添加prop属性和rules属性。当校验失败时，form-item组件会自动显示对应的错误提示信息。 <el-form :rules="rules" ref="form"> <el-form-item label="名称" prop="name" :rules="{required: true, message: '请输入名称'}"> <el-input v-model="form.name"></el-input> </el-form-item> </el-form> 也可以通过自定义校验提示信息显示来实现更加灵活的校验提示信息： <el-form :rules="rules" ref="form"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name"></el-input> <template #error> <span class="error-tips">{{ form.name ? '名称不能为空' : '请输入名称' }}</span> </template> </el-form-item> </el-form> 其中，#error是slot的使用方式，表示当校验失败时自定义的错误提示信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值