vue使用element-ui实现表单验证


Posted in Vue.js onDecember 13, 2020

本文实例为大家分享了vue使用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>

效果图如下

vue使用element-ui实现表单验证

三、表单提交

实现思路

  • 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
  }
  })
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue——前端生成二维码的示例
Dec 19 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
vue+element实现动态加载表单
Dec 13 #Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 #Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 #Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 #Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 #Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 #Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 #Vue.js
You might like
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
Python中包的用法及安装
2020/02/11 Python
如何在django中运行scrapy框架
2020/04/22 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
简单html5代码获取地理位置
2014/03/31 HTML / CSS
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
python re模块和正则表达式
2021/03/24 Python
办加油卡单位介绍信
2014/01/09 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
求职信模板
2014/05/23 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
教师节校长致辞
2015/07/31 职场文书