转载自:

一、简单逻辑验证(直接使用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. EF中,保存实体报错:Validation failed for one or more entities. 如何知道具体错误在哪?

    异常提示:Validation failed for one or more entities. See 'EntityValidationErrors' property for more deta ...

  2. git 小轿车 开车了

    1.2什么是版本库? 什么是版本库?版本库又名仓库,英文名repository,你可以简单的理解一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改,删除,Git都能跟踪,以便任何时 ...

  3. leafLet入门教程兼leafLet API中文文档参考

    英文文档参考:https://leafletjs.com/reference-1.3.4.html#popup 博客参考:https://blog.csdn.net/qq_36595013/artic ...

  4. json对象组按某个字段排序

    JS排序 键值对 var sortBy=function (filed,rev,primer){ rev = (rev) ? -1 : 1; return function (a, b) { a = ...

  5. windows10 右键 manage 没反应

    发现自己的windows10右键 This PC,然后点manage没反应..... 想到直接找到对应的可执行文件,但是苦于不知道可执行文件的名. 经过在网上搜索,可执行文件是:C:\Windows\ ...

  6. Xamarin.Forms踩坑集锦(持续更新)

    1.ImageButton控件 问题:ImageButton在切换图片的时候,图片大小会改变. Github Issue:ImageButton changes image size · Issue ...

  7. (Review cs231n) Object Detection

    目标:我们有几个类别,然后我们要在这张图中找到这些类的所有实例 解决思路:是否可以按照回归的思路进行求解呢? 但是受限制于确定的种类输出问题. 方法:分类和回归是解决问题的两个套路,我们现在对于目标的 ...

  8. Vim搜索、取消高亮、显示行数、取消行数

    1.显示行数 :set nu 2.取消行号 :set nu! 3.高亮搜索 /target 4.取消高亮 :noh

  9. 关于linux系统CPU篇--->上下文切换

    1.什么是CPU上下文切换? linux是一个多任务操作系统,它支持远大于CPU数量的任务同时运行,当然这些任务实际上并不是真的同时在运行,而是因为系统在很短的时间内,将CPU轮流分配给它们,造成多任 ...

  10. token鉴权的一种实现方式图解