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 相关文章推荐
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 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获取表单textarea数据中的换行问题
2010/09/10 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
理解 JavaScript 预解析
2009/10/25 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
在Django的通用视图中处理Context的方法
2015/07/21 Python
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
Django如何配置mysql数据库
2018/05/04 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
爱国卫生月实施方案
2014/02/21 职场文书
端午节活动策划方案
2014/03/09 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS