vue中使用element-ui进行表单验证_dong-v的博客-CSDN博客_element ui 验证
vue中使用element-ui进行表单验证
dong-v
于 2018-06-21 16:12:25 发布
48063
收藏
120
分类专栏：
vue
文章标签：
vue表单验证
elementUI表单验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42018790/article/details/80762149
版权
vue
专栏收录该内容
8 篇文章
0 订阅
订阅专栏
element-ui 中验证
一、简单逻辑验证（直接使用rules）
实现思路
html中给el-form增加 :rules="rules"html中在el-form-item 中增加属性 prop="名称"js中直接在data中定义rules:{}html部分
<el-form ref="form" :rules="rules" :model="form" label-width="300px">
<el-form-item label="发货地址：" prop="fAdderss">
<el-input class="inp" v-model="form.fAdderss" auto-complete="true"></el-input>
<el-button type="primary" class="btn-add" @click="onSubmit">常用地址</el-button>
</el-form-item>
</el-form>
js部分
<script>
export default {
data() {
return {
form: {
fAdderss: '',
},
// 校验规则
rules: {
fAdderss: [
{ required: true, //是否必填
message: '地址不能为空', //规则
trigger: 'blur' //何事件触发
},
//可以设置双重验证标准
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', }
</script>
二、自定义验证逻辑
实现思路
html中给el-form增加 :rules="rules"html中在el-form-item 中增加属性 prop="名称"js中直接在data中在rules中的名称对应中设置 validator: 验证器名称,js中在data中 return之上书写验证器对应的js验证逻辑html部分
<el-form ref="form" :rules="rules" :model="form" label-width="300px">
<el-form-item label="发货人电话" prop="phone">
<el-input class="inp" v-model="form.phone" auto-complete="true"></el-input>
</el-form-item>
</el-form>
js部分
<script>
export default {
data() {
// 此处自定义校验手机号码js逻辑
var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
var validatePhone = (rule, value, callback) => {
if (!value) {
return callback(new Error('号码不能为空!!'))
setTimeout(() => {
if (!phoneReg.test(value)) {
callback(new Error('格式有误'))
} else {
callback()
}, 1000)
return {
form: {
phone: '',
},
// 校验规则
rules: {
// 校验手机号码，主要通过validator来指定验证器名称
phone: [{ required: true, validator: validatePhone, trigger: 'blur' }]
},
</script>
效果图如下
三、表单提交
实现思路
html中给el-form增加 ref="form" :model="ruleForm"html中给提交按钮增加点击事件 @click="submitForm('ruleForm')" （）中对应的为form的:model="ruleForm" js中直接在methods中定义提交事件 submitForm(){}
+html部分
//form
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" >
//表单项
<el-form-item label="发货人电话" prop="phone">
<el-input class="inp" v-model="form.phone" auto-complete="true"></el-input>
</el-form-item>、
...
//提交按钮
<el-button class="btn-login" type="primary" size="medium" @click="submitForm('ruleForm')">立即登录</el-button>
</el-form>
js部分
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
//如果通过验证 to do...
} else {
console.log('error submit!!')
return false
})
dong-v
关注
关注
34
点赞
120
收藏
打赏
评论
vue中使用element-ui进行表单验证
element-ui 中验证一、简单逻辑验证（直接使用rules）实现思路html中给el-form增加 :rules=&amp;quot;rules&amp;quot;html中在el-form-item 中增加属性 prop=&amp;quot;名称&amp;quot;js中直接在data中定义rules:{}html部分&amp;amp;lt;el-form ref=&amp;quot;form&amp;quot; :r
复制链接
扫一扫
专栏目录
vue+elementUI 复杂表单的验证、数据提交方案问题
10-16
主要介绍了vue+elementUI 复杂表单的验证、数据提交方案,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
element ui 上传文件带本地验证和接口验证
qq_22167557的博客
10-28
257
element ui 上传文件带本地验证和接口验证
评论 8
您还未登录，请先
登录
后发表或查看评论
element-ui Form表单验证规则全解
qq_30944053的博客
01-24
2万+
element-ui Form表单验证规则全解
element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索,自己经过数次爬坑
之后,总结了几种form表单的验证规则,为了便于阅读,验证规则是拆分的,完整的代码放在文末
1. 普通输入验证
<el-form-item label="活...
element ui 动态添加表单实现验证规则
最新发布
qwyio的博客
11-14
517
动态增减表单验证规则的实现和思路，简单实现表单的增删 ，并且对新增表单项及默认表单项进行必填项校验
vue2.0+elementUI 表单提交验证
热门推荐
weixin_42507803的博客
08-21
4万+
HTML 页面
1：首先在form里绑定：model :rules res 在item标签里用 prop=" 传指定义的名字" 来验证标签
<el-form label-width="140px" :model="staffinfoForm" :rules="editFormRules" ref="staffinfoForm">
element-ui Form表单验证
嘿嘿
07-25
4274
element-ui Form表单验证规则全解
element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索,自己经过数次爬坑
之后,总结了几种form表单的验证规则,为了便于阅读,验证规则是拆分的,完整的代码放在文末
1. 普通输入验证
<el-form-item label="活动名称" prop="name">
<!-- validate-event属性的作用是: 输入
Vue-elementUI 表单校验
weixin_52931720的博客
05-13
442
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
一、Vue-elementUI 表单校验
二：所遇到问题：清空表单失效
总结
前言
代码仅供参考，具体可以根据自己的项目需求完成表单校验，废话不多说，直接上代码！
提示：以下是本篇文章正文内容，下面案例可供参考
一、Vue-elementUI 表单校验
<!--添加NFC标签-->
<el-button
@click="dialogFormVisible=true"
..
Element UI的表单验证
weixin_50965656的博客
07-04
1629
Element UI的表单验证
vue表单验证rules以及validator验证器的使用
m0_53206841的博客
04-25
1万+
为防止用户犯错，尽可能让用户更早地发现并纠正错误。
Element中Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。注意：prop对应表单域 model 字段，使用 validate方法时，该属性是必填的。在data里配置要校验字段和校验规则：required:true；message:""不符合校验规则时的提示信息；trigger:""校验触发方式设置除此之外，我们还可以使用validator验证器.
工作187：表单校验规则
歌谣的博客
12-03
447
第一种常用方式：表单上加rules｛object｝
<el-form class="apply-form first-form" :model="formData" :rules="rule" ref="form">
<el-form-item label="姓名" prop="visitorName">
<el-input v-model="formData.visitorName" placeholder="请输入姓名" clearable&gt
element-ui常用验证
weixin_41463944的博客
02-16
348
1、验证函数
var validatorPhone = function(rule, value, callback) {
//手机号验证
if (value === '') {
callback(new Error('手机号不能为空'))
} else if (!/^1\d{10}$/.test(value)) {
callback(new Error('手机号格式错误'))
} else {
callback()
Element-UI中的表单验证
yhang0802的博客
07-03
2954
Element-UI中的表单验证
ElementUi rules表单验证
weixin_33806914的博客
12-23
658
ElementUi 表单验证
可以在pattern中书写正则，并且配合elementUI进行表单验证。
pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式。
rules: {
name:[{
required: true,
message: '请输入用户名',
...
element-ui vue表单验证踩坑
清风了了的博客
06-08
2万+
1.要验证输入只能为数字时
{type:'number',message:'只能为数字'}。。必须要在v-model后面加上.number。。即v-moder.number
但是这里的验证会将你输入的value格式化为number值，在你做自定义校验的时候，要格外注意，很有可能你的正则表达式没有起到效果，就是因为它自动给你转化格式了。。。
2.附加element-ui + vue 自定...
vue elementUI之Form表单 验证
weixin_33894640的博客
08-21
472
首先说一下 我在form表单里面遇见的坑：
1.例如我要给后台传的不是对象，而是一个数组，怎么写验证？
2.比如我有四个弹出框，都要做验证，这个时候就要注意了，每一个弹出框的ref都不能给的一样，并且一定要与当前弹框的确定或者保存按钮一一对应，例如：第一个弹框的ref='number',按钮的click比如为xxxxxx('number'),第二个弹出框的ref=‘number2’，对应的按钮...
element 表单验证的三种方式
acoolgiser的博客
05-29
1599
目录
第一种常用方式：表单上加rules｛object｝
第二种方式：在el-form-item单个添加
第三种方式：动态增减表单项
第一种常用方式：表单上加rules｛object｝
<el-form class="apply-form first-form" :model="formData" :rules="rule" ref="form">
<el-form-item label="姓名" prop="visitorName">
<e
element表单验证规则遇到的坑
Codernmx
12-26
4546
element验证规则遇到的坑
一、首先是你需要为那几个输入框或者其他添加限制规则，你就要设置几个规则并且命名最好和你绑定的值的关键字一样
二、然后就是prop需要绑定在el-form-item上，如果el-input外层还有多个el-form-item，必须写在父级的标签上，不然规则不会成功
自己看看结构例如：
<el-form-item label="执法人员2" class="item">
<el-col :span="6">
&lt
ElementUI表单验证例子
dujianxiong的博客
12-29
6372
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并
Form-Item 的 prop 属性设置为需校验的字段名即可。
（http://element-cn.eleme.io/#/zh-CN/component/form）
普通文本输入框：
级联选择 or 多选：
vue 表单校验不通过时拦截提交表单
10-10
4025
上代码：
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="名称" prop="name">
<el-input type="textarea" v-model="ruleForm.name"></el-input>
</el-form-item
vue elementui 自定义表单触发验证
YaRuu的博客
05-25
1786
表单验证 rules内触发事件trigger只有一下几种：
比如 阁下遇到没有这些触发事件的时候，或者自定义封装组件 需要正则验证，就不能用上边的触发事件
类似于这种自己封装的表单时间段组件
按照正常表单验证代码就是：
HTML：
<el-form-item label="呼叫时间段:" prop="outboundTime"
>(最小可选呼叫时间段为1小时,双击已选中时间段可取消选择)

Element Ui使用技巧——Form表单的校验规则rules详细说明
zhouxianguang的专栏
09-20
7058
逍遥云天
Element Ui使用技巧——Form表单的校验规则rules详细说明
Element UI中对Form表单验证的使用介绍：
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item的 prop 属性设置为需校验的字段名即可。校验规则参见async-validator
文档中提及的用法有2种：
1.对整个表单进行规则验证：
<el-form :model="ruleForm" status-icon :rules="r.
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：精致技术
设计师：CSDN官方博客
返回首页
dong-v
CSDN认证博客专家
CSDN认证企业博客
码龄5年
暂无认证
16
原创
19万+
周排名
190万+
总排名
20万+
访问
等级
1147
积分
37
粉丝
65
获赞
23
评论
236
收藏
私信
关注
分类专栏
vue
8篇
最新评论
vue中使用element-ui进行表单验证
ZiWie丶ZHANG:
你用console.log(formName,this.$refs);打印一下这两参数发现问题了
vue中单选框设置默认选中值
写bug的小张:
你是怎么好意思打原创的啊
vue中使用element-ui进行表单验证
weixin_57410971:
element-ui表单验证有哪位大神能说详细点的
vue中单选框设置默认选中值
JS_new:
对象怎么回显，你这官网复制的么米用
vue中使用element-ui进行表单验证
「已注销」:
解决了
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
vue父子组件传值实践
vue-cli项目中使用全局过滤器及传参
mpVue中使用小程序自带组件 picker
2019年1篇
2018年15篇
目录
目录
分类专栏
vue
8篇
目录
评论 8
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
dong-v
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值