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 数组克隆方法 小结
Mar 20 Javascript
仿jQuery的siblings效果的js代码
Aug 09 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
js实现二级联动简单实例
Jan 11 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
微信小程序选择图片控件
Jan 19 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
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
python万年历实现代码 含运行结果
2017/05/20 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
详解python3中tkinter知识点
2018/06/21 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
自荐信要包含哪些内容
2013/11/06 职场文书
经理助理岗位职责
2014/03/05 职场文书
动物科学专业求职信
2014/07/27 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
商务代表岗位职责
2015/02/15 职场文书
恰同学少年观后感
2015/06/08 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
python中的random模块和相关函数详解
2022/04/22 Python