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 相关文章推荐
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
js表头排序实现方法
Jan 16 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 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
Thinkphp微信公众号支付接口
2016/08/04 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
初识Javascript小结
2015/07/16 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
vue组件学习教程
2017/09/09 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
Python实现配置文件备份的方法
2015/07/30 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
构建高效的python requests长连接池详解
2020/05/02 Python
python3.7调试的实例方法
2020/07/21 Python
python使用建议与技巧分享(一)
2020/08/17 Python
python中的yield from语法快速学习
2020/11/06 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
护理专业推荐信
2013/11/07 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
走近毛泽东观后感
2015/06/04 职场文书
青春雷锋观后感
2015/06/10 职场文书
离职信范文
2015/06/23 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
Vue.Draggable实现交换位置
2022/04/07 Vue.js
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python