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 element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 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
用PHP和ACCESS写聊天室(十)
2006/10/09 PHP
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
PHP类的封装与继承详解
2015/09/29 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
python实现用于测试网站访问速率的方法
2015/05/26 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python中正则表达式详解
2017/05/17 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
python打开文件的方式有哪些
2020/06/29 Python
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
俄语专业毕业生求职信
2014/07/12 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
地道战观后感
2015/06/04 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server