vue+element实现表单校验功能

2024-10-27 13:29:20

要实现这个功能其实并不难,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实现表单校验功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

解决Vue+Element ui开发中碰到的IE问题

IE9样式错乱,IE11无法正常加载v-loading等问题引入了babel-polyfill插件,依然出现"polyfill-eventsource added missing EventSource to window"的奇怪问题(ie所有版本都有出现) 第一步:安装babel-ployfill (已安装请跳过此步骤) yarn add babel-ployfill 修改webpack打包配置文件:webpack.bash.conf.js // 引入babel-ployfill
vue中element 上传功能的实现思路

element 的上传功能最近有个需求,需要在上传文件前,可以进行弹窗控制是否上传 upload 看完文档后,感觉有两种思路可以实现 before-upload auto-upload, on-change before-upload 初始代码 // template <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-fi
vue.js+element-ui动态配置菜单的实例

如下所示:  <aside :class="collapsed?'menu-collapsed':'menu-expanded'">  <el-menu unique-opened router v-show="!collapsed">  <templ
vue实现element-ui对话框可拖拽功能

element-ui对话框可拖拽及边界处理应业务需求,需要实现对话框可拖拽问题,应element-ui没有提供官方支持,于是便参考大神的文章,得出了适合业务需要的解决方案.很多大神给出的代码是没有解决边界问题的,但是不解决边界问题存在一个bug,拖到不可视区域后边再也拖不回来了,不信你们可以试试. 在实现的功能的情况下,封装成了js文件,然后再main.js中引入后可全局使用. 还是上代码吧功能实现代码directives.js代码如下: import Vue from 'vue'; //
vue+axios+element ui 实现全局loading加载示例

实现全局loading加载分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单对不对? import axios from 'axios'; import { Message, Loading } from 'element-ui'; import Cookies from 'js-cookie'; import router from '@/router/index' let loading //定义loading变量 function st
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事

前言公司系统在用elementui做后台开发,不免遇到一些需要自己去根据原有的功能上,加一些交互的功能. 今天来介绍下我在用elementUi里的Tag标签与多选框交互的过程,东西听上去很简单,但就是越简单的东西越容易出一些问题.官方tag文档:elementUi-tag标签效果图: 思路一.多选框勾选,出现对应的tag: 1.利用watch监听多选框绑定的值A(数组)的变化: 2.根据A的变化,循环拿到勾选多选框的id对应的name,将id以及对应的name组成新的对象数组: 3.将上一
vue使用ElementUI时导航栏默认展开功能的实现

本文主要参考: http://element.eleme.io/#/zh-CN/component/menu 在使用elementUI的时候发现,能够展开的导航栏是不能展开的,效果这里先不演示了.可以在上边的网站上看到. 现在有这样的需求,就是说,默认的时候需要展开这些导航,就是一打开界面的时候就能够显示导航里面的菜单内容. 具体操作是这样的: <script src="//unpkg.com/vue/dist/vue.js"></script> <scr
Vue+element-ui 实现表格的分页功能示例

本文介绍了Vue+element-ui 实现表格的分页功能示例,分享给大家,具体如下: 实现效果如下图所示: template部分: <el-table :data="tempList" :header-cell-style="rowClass" stripe border style="margin-bottom:14px;" :empty-text="emptyText"> <el-table-colum
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)

在做后台管理系统中遇到一个需求, 点击一个按钮可以变换里面字的内容当状态为显示的时候, 该行第一个按钮为隐藏; 当状态为隐藏的时候, 该行第一个按钮为显示; 具体代码如下:  <el-table :data="tableData" class="table" stripe border v-loading="loading"> <el-table-column type="ind
vue+element实现表单校验功能

要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能: 实现这个功能,总共分为以下4布: 1.在el-form标签中定义:rules="rules";ref="reference" 2.在el-form-item定义prop="name"; 3.在选项data中定义rules校验规则; 4.在提交方法中检查用户行为 templa
vue elementUI 表单校验功能之数组多层嵌套

在使用vue element-ui form表单渲染的时候,会遇到这样的数据结构: { "title":''123455, "email":'123456@qq.com', "list": [ { "id": "quis consequat culpa ut pariatur", "name": "et quis irure dolore ullamco", &quo
AngularJs表单校验功能实例代码

废话不多说了,具体代码如下所示: <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> <meta charset="UTF-8"> <title>angular表单校验</title> <link rel="stylesheet" href="../css/bootstrap.min.cs
使用JavaScript进行表单校验功能

文本框校验以下是文本框的校验步骤. 1.获取待校验的文本框value值, 2.对value值设置判定条件,使用if语句或switch语句实现. 3. 若满足条件,则校验通过,返回值为true. 4. 若不满足条件则返回值为false,替换文本输出校验的提示信息. 5. 表单获取多个验证的返回值,做逻辑运算,将参数传递给表单form的onsubmit事件. 6. 在input中调用校验函数,我使用的是onblur事件触发校验函数. 下拉框校验下拉框的校验相比文本框略有不同,下拉框中option
解决vue+ element ui 表单验证有值但验证失败问题

一.如图:有值但是验证失败二. <el-form :model="form" :rules="rules"> <el-form-item label="数据模板" prop="template" > <el-col :span="20"> <el-input type="textarea" v-model="form.template
js实现表单校验功能

本文实例为大家分享了js实现表单校验功能的具体代码,供大家参考,具体内容如下 1.所用到的三个事件: onfocus(焦点聚焦事件).onblur(焦点离开事件).onkeyup(按键抬起的事件) 2.利用事件触发函数,函数中执行校验的信息. 3.利用checkform判断表单中的内容是否规范,如果规范submit按钮可以提交表单信息. 简单效果: form中的代码: <form action="demo.html" onsubmit="return checkForm
vue 如何实现表单校验

一.安装并使用首先,在你的vue项目中进行安装: npm install --save vue-input-check 安装完成以后引入并注册: import inputCheck from 'vue-input-check'; // 安装 Vue.use(inputCheck); 然后,我们就可以在表单中使用了: <form autocomplete="off" novalidate> <input v-model='key' name='输入框名称' v-inp
100行代码实现vue表单校验功能(小白自编)

两个文件,一个写逻辑,一个写校验规则: 特点:逻辑简单,代码量少,够用: 不想看代码直接新建这两个文件复制代码,看最下面的使用方法: 示例图片 //validator.js //引入校验规则 var valitatorRules = require('./valitator-rules.js'); export const Validator=function(formName,rules,errors){ // rules:{ // name:'required|regexp_hanzi',
微信小程序实现表单校验功能

小程序SDK版本 1.4 表单校验之难如果要问微信小程序最难实现的公共业务是什么?应该是表单校验,没有之一.原因如下: 表单组件在数量上达到11个,居各类组件之首.当然幸运的是,并不是所有的都需要校验. 而这些组件操作方式多样,可分为滑动.(多行)输入.点击.点击+滑动. 即使是同一个组件,因为业务场景不同就会有不同的校验规则. 更麻烦的是,这些组件之间经常还会联动或者关联校验. - 但是,作为一个非简单静态页面,有着较多用户交互的小程序,表单校验又是一个非常常用的功能:登录.注册.新增.编辑
vue element自定义表单验证请求后端接口验证

做vue项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值. template <el-form-item label="账户" prop="userid"> <el-input v-model="addForm.userid"></el-input> </el-form-item> 引入接口 import { checkUseridRepeat } fro

vue+element实现表单校验功能

相关推荐

随机推荐