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 ...
随机推荐
- EF中,保存实体报错:Validation failed for one or more entities. 如何知道具体错误在哪?
异常提示:Validation failed for one or more entities. See 'EntityValidationErrors' property for more deta ...
- git 小轿车 开车了
1.2什么是版本库? 什么是版本库?版本库又名仓库,英文名repository,你可以简单的理解一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改,删除,Git都能跟踪,以便任何时 ...
- leafLet入门教程兼leafLet API中文文档参考
英文文档参考:https://leafletjs.com/reference-1.3.4.html#popup 博客参考:https://blog.csdn.net/qq_36595013/artic ...
- json对象组按某个字段排序
JS排序 键值对 var sortBy=function (filed,rev,primer){ rev = (rev) ? -1 : 1; return function (a, b) { a = ...
- windows10 右键 manage 没反应
发现自己的windows10右键 This PC,然后点manage没反应..... 想到直接找到对应的可执行文件,但是苦于不知道可执行文件的名. 经过在网上搜索,可执行文件是:C:\Windows\ ...
- Xamarin.Forms踩坑集锦(持续更新)
1.ImageButton控件 问题:ImageButton在切换图片的时候,图片大小会改变. Github Issue:ImageButton changes image size · Issue ...
- (Review cs231n) Object Detection
目标:我们有几个类别,然后我们要在这张图中找到这些类的所有实例 解决思路:是否可以按照回归的思路进行求解呢? 但是受限制于确定的种类输出问题. 方法:分类和回归是解决问题的两个套路,我们现在对于目标的 ...
- Vim搜索、取消高亮、显示行数、取消行数
1.显示行数 :set nu 2.取消行号 :set nu! 3.高亮搜索 /target 4.取消高亮 :noh
- 关于linux系统CPU篇--->上下文切换
1.什么是CPU上下文切换? linux是一个多任务操作系统,它支持远大于CPU数量的任务同时运行,当然这些任务实际上并不是真的同时在运行,而是因为系统在很短的时间内,将CPU轮流分配给它们,造成多任 ...
- token鉴权的一种实现方式图解