vue+element实现表单校验功能


Posted in Javascript onMay 20, 2019

 要实现这个功能其实并不难,element组件直接用就可以,

但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程......

表单校验功能:

 vue+element实现表单校验功能

实现这个功能,总共分为以下4布:

1.在el-form标签中定义:rules="rules";ref="reference"
2.在el-form-item定义prop="name";
3.在选项data中定义rules校验规则;
4.在提交方法中检查用户行为

template代码:

<el-form
      :model="Opinion"
      ref="MyOpinion"
      :rules="rules"
      size="small"
      class="lj-form lj-form-s1"
     >
      <el-form-item label="审核意见: " prop="txt" style="margin-bottom:25px;">
       <el-input type="textarea" :rows="5" v-model="Opinion.txt"></el-input>
      </el-form-item>
     </el-form>

data定义数据代码:

data() {
   return {
 Opinion: {
     radio: "1",
     txt: "",
     value: ""
    },
    rules: {
     txt: [{ required: true, message: "请输入审核意见", trigger: "blur" }]
    }
   };
  },

methods方法代码:

async approval() {
    let _this = this;
 this.$refs.MyOpinion.validate(async valid => {
      if (valid) {
       const res2 = await _this.$axios.post(`/approve/approve_refuse`, {
        ...obj
       });
       if (res2.data.error == 0) {
        _this.$message.success(res2.data.message);
       }
       _this.innerVisible = false;
       _this.visibleApply = false;
      }
     });
 }

注意点:①定义prop的时候,值要求是属于form绑定的model数据对象里面,同时名字要一样;

  ②data中定义rules要在定义表单的数据之后(我一般放在data的最后面)

总结

以上所述是小编给大家介绍的vue+element实现表单校验功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
一段实现页面上的图片延时加载的js代码
Feb 11 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
详解angular应用容器化部署
Aug 14 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
vant自定义二级菜单操作
Nov 02 Javascript
javascript的this关键字详解
May 20 #Javascript
小程序实现新用户判断并跳转激活的方法
May 20 #Javascript
node实现socket链接与GPRS进行通信的方法
May 20 #Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 #Javascript
react 中父组件与子组件双向绑定问题
May 20 #Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 #Javascript
一文搞懂ES6中的Map和Set
May 20 #Javascript
You might like
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
python manage.py runserver流程解析
2019/11/08 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
集团公司总经理岗位职责
2013/12/20 职场文书
玄武湖导游词
2015/02/05 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python