首先说一下 我在form表单里面遇见的坑:

1.例如我要给后台传的不是对象,而是一个数组,怎么写验证?

2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且一定要与当前弹框的确定或者保存按钮一一对应,例如:第一个弹框的ref='number',按钮的click比如为xxxxxx('number'),第二个弹出框的ref=‘number2’,对应的按钮>>xxxxxx('number2')。如果ref用的都一样,就会出现,点击下一步我没有去做验证,我再点击上一步,再点击下一步,控制台就会报错!

官网给的列子是在<el-form>里面进行验证,(当然也可以不用再标签里面进行验证,这里我重要说在标签里!!!),标签上要绑定一个对象(例,:model='numberValidateForm'),注意:model绑定的必须是一个对象,如果是一个数组怎么办呢?这个下面再说,ref="numberValidateForm" 是什么呢,我要对表单进行验证,当然少不了确定或者保存按钮,名字需要和按钮一一对应,这样才能实现 点击保存的时候去验证输入框,上图!

开始验证:(创建弹框的确定按钮 调用的函数,详情看最后一张图)

addgroupList(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
const groupName = xxxxxxxxxxxx;
const description = xxxxxxxxxxxx;
axios({
method: 'post',
url: 'xxxxxxxxxxxxxxxxxxxxx',
data: {
groupName: xxxxxxxxxxxxx,
groupDescription: xxxxxxxxxxxxxxx
}
}).then(res => {
this.creatGroup = false;
this.searchGroupName = '';
this.initData();
}).catch(error => {
console.log('网络错误,不能访问');
});
} else {
console.log('error submit!!');
return false;
}
});
},

好,接下来就要我们解决上面说的数组的问题了,如果我要传给后台的是一个数组,不是对象,我要怎么去做验证呢?直接上代码。

 let flag = true;
if (this.$refs[formName] instanceof Array && this.$refs[formName].length > 0) {
this.$refs[formName].forEach((obj, index) => {
obj.validate((valid) => {
if (valid) {
console.log('验证成功!');
} else {
console.log('error submit!!');
flag = false;
return false;
}
});
}); if (flag) {
this.secondDialog = false;
this.thirdDialog = true;
}
}

当然,你要是觉得麻烦,也可以用JQ的方法去做验证,这样简单一点:(判断输入框paramName 是否为空,如果为空,显示错误提示信息,否则不显示)

 let flag = true;
2   this.requestParamsList.map((data, index) => {
if (data.paramName == "") {
$(".jqueryValidate").eq(index).show();
flag = false;
}
});

最终效果图如下:

以上就是今天给大家分享的内容,希望大家多多提出自己的建议,谢谢

如果我的内容对你有帮助,欢迎打赏

vue elementUI之Form表单 验证的更多相关文章

  1. vue+element-ui中的表单验证(电话等等)

    1. 2. 3. ============================================================上代码============================ ...

  2. vue elementui form表单验证

    最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...

  3. element-ui Form表单验证

    element-ui Form表单验证规则全解 element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索, ...

  4. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  5. django之form表单验证

    django中的Form一般有两种功能: 输入html 验证用户输入 #!/usr/bin/env python # -*- coding:utf- -*- import re from django ...

  6. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  7. python_way day19 HTML-day5 (form表单验证,CSRF,cookie,session,缓存)

    python-way day19 1. dJango的form表单验证 2.CSRF 跨站请求伪造 3.cookie,session 4.缓存 一,django表单验证功能 1.django验证基础: ...

  8. form表单验证2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作

    一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...

随机推荐

  1. EasyNetQ之多态发布和订阅

    你能够订阅一个接口,然后发布基于这个接口的实现. 让我们看下一个示例.我有一个接口IAnimal和两个实现Cat和Dog: public interface IAnimal { string Name ...

  2. MyBatis基础

    一.大配置 <?xml version="1.0" encoding="UTF-8" ?> <!--文档类型,头文件--> <!D ...

  3. JAVA - 深入JAVA 虚拟机 2

    类的两种类型的类加载器 -Java虚拟机自带的加载器 根类加载器(Bootstrap): 使用C++编写,programer can not abtain this class. 扩展类加载器(Ext ...

  4. 002.Create a web API with ASP.NET Core MVC and Visual Studio for Windows -- 【在windows上用vs与asp.net core mvc 创建一个 web api 程序】

    Create a web API with ASP.NET Core MVC and Visual Studio for Windows 在windows上用vs与asp.net core mvc 创 ...

  5. Luogu 1006 传纸条 / NOIP 2008 传纸条(动态规划)

    Luogu 1006 传纸条 / NOIP 2008 传纸条(动态规划) Description 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m ...

  6. Django学习(八)---修改文章和添加文章

    博客页面的修改文章和添加新文章 从主页点击不同文章的超链接进入文章页面,就是传递了一个id作为参数,然后后台代码根据这个参数从数据库中取出来对应的文章,并把它传递到前端页面 修改文章和添加新文章,是要 ...

  7. C++学习(三)入门篇——函数

    C++函数分两种:有返回值的和没返回值的 1.有返回值的函数 调用函数流程 如图,sqrt(6.25)为函数调用,被调用的函数叫做被调用函数,包含函数调用的函数叫做调用函数. 参数是发送给函数的信息, ...

  8. Java版 QQ空间自动登录无需拷贝cookie一天抓取30WQQ说说数据&流程分析

    QQ空间说说抓取难度比较大,花了一个星期才研究清楚! 代码请移步到GitHub GitHub地址:https://github.com/20100507/Qzone [没有加入多线程,希望你可以参与进 ...

  9. struts2.0的工作原理?

    struts2并不是一个陌生的web框架,它是以Webwork的设计思想为核心,吸收struts1的优点,可以说 struts2是struts1和Webwork结合的产物. struts2 的工作原理 ...

  10. (转)Spring 的 init-method 和 destory-method

    背景:今天在项目中看到spring中bean在初始化和注销时候的方法定义,之前没有用过这种方式,在此记录下,方便后期查看! 关于在spring 容器初始化 bean 和销毁前所做的操作定义方式有三种: ...