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中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 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 Hash函数,增强密码安全
2011/02/25 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Python求导数的方法
2015/05/09 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
python图像和办公文档处理总结
2019/05/28 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
项目经理岗位职责
2013/11/11 职场文书
员工工作自我评价
2014/09/26 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
观后感的写法
2015/06/19 职场文书
董事长秘书工作总结
2015/08/14 职场文书
入党申请书怎么写?
2019/06/21 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript