vue中使用element-ui进行表单验证的实例代码


Posted in Javascript onJune 22, 2018

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中使用element-ui进行表单验证的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
深入理解Javascript闭包 新手版
Dec 28 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
Bootstrap精简教程
Nov 27 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 #Javascript
JavaScript 下载svg图片为png格式
Jun 21 #Javascript
MVVM 双向绑定的实现代码
Jun 21 #Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 #Javascript
vue树形结构获取键值的方法示例
Jun 21 #Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 #Javascript
Vue 获取数组键名的方法
Jun 21 #Javascript
You might like
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
JavaScript中九种常用排序算法
2014/09/02 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
初步剖析C语言编程中的结构体
2016/01/16 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
深入浅析Python代码规范性检测
2020/07/31 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
python基于opencv实现人脸识别
2021/01/04 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
什么是lambda函数
2013/09/17 面试题
工程负责人任命书
2014/06/06 职场文书
培训研修方案
2014/06/06 职场文书
医学生求职自荐书
2014/06/12 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
入党介绍人意见范文
2015/06/01 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
Python turtle实现贪吃蛇游戏
2021/06/18 Python