转载自:

一、简单逻辑验证(直接使用rules)

实现思路

•html中给el-form增加 :rules="rules"
•html中在el-form-item 中增加属性 prop="名称"

•js中直接在data中定义rules:{}

<el-form ref="form" :rules="rules" :model="form" label-width="300px">
<el-form-item label="文案" prop="doc">
<el-input v-model="form.doc" placeholder="字数限制15字以内"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
form: {
doc: '',
},
// 校验规则
rules: {
doc: [
{required: true, message: '必填', trigger: 'blur'}
]
}
}
}
}
</script>

二、自定义验证逻辑

实现思路

•html中给el-form增加 :rules="rules"
•html中在el-form-item 中增加属性 prop="名称"
•js中直接在data中在rules中的名称对应中设置 validator: 验证器名称,

•js中在data中 return之上书写验证器对应的js验证逻辑

(prop可以只绑定第一个input的,第二个input写上ref属性,验证的rules中写一个方法,这个方法验证第一个input框的同时,通过 this.$refs.xxx.value的形式获取第二个input框值,只要这两个input框中存在有问题的情况则直接返回new Error()).

<el-form-item prop="over">
<el-input v-model.number="form.over"><span slot="prefix">满</span></el-input>
<el-input v-model.number="form.minus" ref="minus"><span slot="prefix">减</span></el-input>
</el-form-item>
  data () {
var overMinus = (rule, value, callback) => {
let minus = Number(this.$refs.minus.value)
// console.log(minus)
if (!value || !minus) {
callback(new Error('必填 请输入数字(不能为0)'))
}
setTimeout(() => {
if (isNaN(value) === true || isNaN(minus) === true) {
callback(new Error('请输入数字(不能为0)'))
} else if (minus >= value) {
callback(new Error('金额不能高于使用门槛'))
} else {
// 最后这个callback()一定要有,否则提交时不能validate
callback()
}
}, 100)
}
return {
    form:{
...... }
......
rules: {
over: [
{required: true, validator: overMinus, trigger: 'change'}
]
}
}
}

三、表单提交

实现思路

•html中给el-form增加 ref="form" :model="ruleForm"
•html中给提交按钮增加点击事件 @click="submitForm('ruleForm')" ()中对应的为form的:model="ruleForm" 
•js中直接在methods中定义提交事件 submitForm(){}

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" >
//表单项
<el-form-item label="发货人电话" prop="phone">
<el-input class="inp" v-model="form.phone" auto-complete="true"></el-input>
</el-form-item>、
...
//提交按钮
<el-button class="btn-login" type="primary" size="medium" @click="submitForm('ruleForm')">立即登录</el-button>
</el-form>
submit (formName) {
// 表单整体验证
this.$refs[formName].validate((valid) => {
if (!valid) {
console.log('error submit!!')
return false
} else {
this.form['result'] = this.result
console.log(this.form)
// this.$emit('on-close')
}
})
}

element-UI表单验证的更多相关文章

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

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

  2. vue踩坑:vue+ element ui 表单验证有值但验证失败。

    一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...

  3. vue+element 动态表单验证

    公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...

  4. 如何在Vue的项目里对element的表单验证进行封装

    介绍需求 熟悉并优化公司项目的第五天,领导说能不能把表单验证封装一下,我打开代码一看 由于是后台管理系统,无数个需要验证的输入框,由于截图长度受限,只能展示部分,类似于这种页面还有无数个!代码重复率非 ...

  5. element自定义表单验证

    element-ui框架下修改密码弹窗进行表单验证. 除了基础校验,密码不为空,长度不小于6字符,需求中还需校验密码由数字和字母组合. 处理代码如下: <el-dialog :visible.s ...

  6. 使用饿了么ui表单验证报错: [Element Warn][Form]model is required for validat

    [Element Warn][Form]model is required for validat 如文末的完整例子: 该提示说的是 form表单需要一个绑定一个 对象(使用:model=" ...

  7. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  8. (vue.js)element ui 表单重置

    el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :mo ...

  9. element ui 自定义异步验证

    之前提到过,axios是一个异步请求,但是很多时候我们都需要同步请求,比如在element的表单验证中需要验证一个用户名是否存在的时候,异步请求好像就不太好用了.前边博客中提到过,这种情况可以用es6 ...

  10. amaze UI 如何添加原生表单验证

    这段时间做的一个项目,整个系统就一个页面,然后就是各种模态框,js里拼HTML代码,而且因为表单空留距离小,最后选定了amaze ui原生的表单验证 在amaze ui官网找到 表单验证. 但是ama ...

随机推荐

  1. Cocos Creator 监听安卓屏幕下方返回键

    addEscEvent = function(node){ cc.eventManager.addListener({ event: cc.EventListener.KEYBOARD, onKeyP ...

  2. Unity 特写镜头

    using UnityEngine; public class Camera_Feature : MonoBehaviour { public static Camera_Feature instan ...

  3. C# 使用Newtonsoft.Json读写Json文件

    { "CAN": false, "AccCode": 4294901856, "Id": 768, "BPointMove&quo ...

  4. jquery的输入框自动补全功能+ajax

    jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端   内容参考网友文章写成,原博的链 ...

  5. Fiddler抓包【7】_次要功能和第三方插件

    1.替换HTTP Request Host 应用场景:进行开发时,线上去测试跳转调试 替换命令:urlreplace news.baidu.com www.baidu.com: 清除命令:urlrep ...

  6. Elasticsearch从入门到精通之Elasticsearch集群内的原理

    上一章节我介绍了Elasticsearch安装与运行,本章节及后续章节将全方位介绍 Elasticsearch 的工作原理 在这个章节中,我将会再进一步介绍 cluster . node . shar ...

  7. 2019 Lonsdor K518S VS K518ISE

    2019 Lonsdor K518S VS K518ISE: The same: IMMO capabilities + Vehicle coverage. The difference: The u ...

  8. 编译原理---antlr实践+编译过程理解+课程理解知识点

    0.其他说明 0.0编译器分为前.中.后端,课上主要学的是前端.前端又分为词法分析(lexical analysis).语法分析(syntax analysis).语义分析(semantic anal ...

  9. Android的JSON数据解析

    一. 使用原生方式解析 准备工作:准备一个布局文件,用来显示元数据与转换之后的数据 <?xml version="1.0" encoding="utf-8" ...

  10. postman抓包工具与kap项目部署(新猿旺学习总结)

    postman抓包工具 1.post请求在哪里输入数据:选择请求方法-post--->在body里面如图位置输入参数和值,如果是json格式在raw出填写 get请求在哪里输入数据:选择请求方法 ...