element-UI表单验证
转载自:
一、简单逻辑验证(直接使用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表单验证的更多相关文章
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- vue踩坑:vue+ element ui 表单验证有值但验证失败。
一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...
- vue+element 动态表单验证
公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...
- 如何在Vue的项目里对element的表单验证进行封装
介绍需求 熟悉并优化公司项目的第五天,领导说能不能把表单验证封装一下,我打开代码一看 由于是后台管理系统,无数个需要验证的输入框,由于截图长度受限,只能展示部分,类似于这种页面还有无数个!代码重复率非 ...
- element自定义表单验证
element-ui框架下修改密码弹窗进行表单验证. 除了基础校验,密码不为空,长度不小于6字符,需求中还需校验密码由数字和字母组合. 处理代码如下: <el-dialog :visible.s ...
- 使用饿了么ui表单验证报错: [Element Warn][Form]model is required for validat
[Element Warn][Form]model is required for validat 如文末的完整例子: 该提示说的是 form表单需要一个绑定一个 对象(使用:model=" ...
- vue开源Element UI表单设计及代码生成器
在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...
- (vue.js)element ui 表单重置
el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :mo ...
- element ui 自定义异步验证
之前提到过,axios是一个异步请求,但是很多时候我们都需要同步请求,比如在element的表单验证中需要验证一个用户名是否存在的时候,异步请求好像就不太好用了.前边博客中提到过,这种情况可以用es6 ...
- amaze UI 如何添加原生表单验证
这段时间做的一个项目,整个系统就一个页面,然后就是各种模态框,js里拼HTML代码,而且因为表单空留距离小,最后选定了amaze ui原生的表单验证 在amaze ui官网找到 表单验证. 但是ama ...
随机推荐
- Cocos Creator 监听安卓屏幕下方返回键
addEscEvent = function(node){ cc.eventManager.addListener({ event: cc.EventListener.KEYBOARD, onKeyP ...
- Unity 特写镜头
using UnityEngine; public class Camera_Feature : MonoBehaviour { public static Camera_Feature instan ...
- C# 使用Newtonsoft.Json读写Json文件
{ "CAN": false, "AccCode": 4294901856, "Id": 768, "BPointMove&quo ...
- jquery的输入框自动补全功能+ajax
jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端 内容参考网友文章写成,原博的链 ...
- Fiddler抓包【7】_次要功能和第三方插件
1.替换HTTP Request Host 应用场景:进行开发时,线上去测试跳转调试 替换命令:urlreplace news.baidu.com www.baidu.com: 清除命令:urlrep ...
- Elasticsearch从入门到精通之Elasticsearch集群内的原理
上一章节我介绍了Elasticsearch安装与运行,本章节及后续章节将全方位介绍 Elasticsearch 的工作原理 在这个章节中,我将会再进一步介绍 cluster . node . shar ...
- 2019 Lonsdor K518S VS K518ISE
2019 Lonsdor K518S VS K518ISE: The same: IMMO capabilities + Vehicle coverage. The difference: The u ...
- 编译原理---antlr实践+编译过程理解+课程理解知识点
0.其他说明 0.0编译器分为前.中.后端,课上主要学的是前端.前端又分为词法分析(lexical analysis).语法分析(syntax analysis).语义分析(semantic anal ...
- Android的JSON数据解析
一. 使用原生方式解析 准备工作:准备一个布局文件,用来显示元数据与转换之后的数据 <?xml version="1.0" encoding="utf-8" ...
- postman抓包工具与kap项目部署(新猿旺学习总结)
postman抓包工具 1.post请求在哪里输入数据:选择请求方法-post--->在body里面如图位置输入参数和值,如果是json格式在raw出填写 get请求在哪里输入数据:选择请求方法 ...