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 相关文章推荐
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
理解javascript中的闭包
Jan 11 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 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
ie6 动态缩略图不显示的原因
2009/06/21 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
JavaScript函数作用域链分析
2015/02/13 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Python动态加载模块的3种方法
2014/11/22 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
Python with语句和过程抽取思想
2019/12/23 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
护士进修自我鉴定
2014/02/07 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
家长对孩子的评语
2014/04/18 职场文书
学前班评语大全
2014/05/04 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
唐山大地震观后感
2015/06/05 职场文书
KTV员工管理制度
2015/08/06 职场文书
大学学生会竞选稿
2015/11/19 职场文书
python基础之匿名函数详解
2021/04/21 Python
springcloud之Feign超时问题的解决
2021/06/24 Java/Android