Vue+Element-Ui 异步表单效验
简单的效验
Form 组件提供了表单验证的功能,只需要通过rules
属性传入约定的验证规则,并将 Form-Item 的prop
属性设置为需校验的字段名
/* ruleForm :表单绑定的数据
rules : 表单效验规则
ref="ruleForm" : 表示el-form 这个Dom 节点
*/
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
<el-form-item label="活动名称" prop="name"> //el-form-item 上面必须要设置 prop 属性prop对应绑定的model值
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
},
rules: {
//name 对应 prop 的值
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
//调用表单节点的效验方法
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
</script>
然后是自定义效验
<template>
<el-dialog title="添加新团队" :visible.sync="showNewTeamDialog"> <el-form :rules="rules" ref="newTeam" :model="newTeam" label-width="100px">
<el-form-item label="团队名称" id="teamName" prop="teamName" ref="teamName">
<el-input v-model="newTeam.teamName" placeholder="团队名称" :style="{'width':inputWidth}"></el-input>
</el-form-item> <div class="postButtons">
<el-form-item>
<el-button v-if="drugSearch_btn_edit" type="primary" @click="onSubmit('newTeam')" style="width:100px">确定</el-button>
<el-button @click="showNewTeamDialog = false" style="width:100px">取消</el-button>
</el-form-item>
</div>
</el-form>
</el-dialog>
</template> <script>
/*
import {
verifyTeamName
} from 'api/doctorTeam/doctorTeamApi'
api/doctorTeam/doctorTeamApi 里面的方法如下
export function verifyTeamName(params) {
return fetch({
url: '/api/nphc/doctorTeam/verifyTeamName',
method: 'post',
params: params
});
}
*/
export default {
data() {
//在return 上面写自定义效验方法
const checkTeamName = (rule, value, callback) => {
if (!value) {
//callback 是提示的信息
return callback(new Error('团队名不能为空'));
} else {
//调用封装了的异步效验方法,
verifyTeamName(this.newTeam).then(response => {
if (response.result.errcode != '0') {
console.log("效验失败");
} else {
if (response.body[0] === 0) {
console.log(response.body[0]);
callback();
} else {
callback("已存在该队名");
}
}
});
}
};
return {
rules: {
teamName: [{
validator: checkTeamName,
trigger: 'blur'
}],
}, newTeam: {
teamName: undefined
}, }
},
methods: { // 新增团队提交
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
addTeam(this.newTeam).then(response => {
if (response.result.errcode != '0') {
console.log("添加团队失败");
} else {
this.newTeam.captainId = undefined;
this.newTeam.hospitalId = undefined;
this.$message('添加团队成功');
this.getList();
}
});
this.showNewTeamDialog = false;
} else {
console.log('error submit!!');
return false;
}
});
},
doAdd() { //重置表单清除表单数据和效验
this.$nextTick(function() {
if (this.$refs.newTeam !== undefined)
this.$refs.newTeam.resetFields();
})
this.showNewTeamDialog = true;
}, }
}
</script>
Vue+Element-Ui 异步表单效验的更多相关文章
- vue + element ui 阻止表单输入框回车刷新页面
问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...
- vue+element ui 重置表单
<el-dialog :title="addForm.title" :visible.sync="dialogFormVisible" width=&qu ...
- Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...
- element ui form表单清空规则
公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...
- 封装Vue Element的form表单组件
前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...
- element ui FORM表单
form表单 Form-Item Slot [label] 旧版语法 <el-form-item label="活动名称" prop="name"> ...
- vue+element 正则表达式进行表单验证
<template> <el-form :model="form" label-width="115px" ref="form&qu ...
- vue+element之多表单验证
方法一:利用promise var p1=new Promise(function(resolve, reject) { this.$refs[form1].validate((valid) => ...
- 基于 vue+element ui 的cdn网站(多页面,都是各种demo)
前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...
随机推荐
- 自己动手实现一个网络模型 python
转自:https://www.jianshu.com/p/4b30e1dd2252 common_funcs.py import numpy as np import matplotlib.pyplo ...
- 关于vs2019
一.vs2019中的MFC 在想创建一个基于对话的应用时找不着模版了,这下可慌了,试遍了已有的各个模版都没要,要么就是缺少头文件,我在想是不是少安装了什么选项.重装了相关模块,最后又核对了一遍,都对. ...
- 开发工具Intellij IDEA:常用快捷键
重命名:shift + F6 查看Javadoc/详情:ctrl + Q 查找接口的实现类:ctrl + alt + B format代码:ctrl + alt + L 全局查询:ctrl + shi ...
- vue.js动态表格增删改代码
新建一个html文件,内容如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...
- ndn挖坑记(二)
目录 如何使用ndnSIM运行自己的仿真实验 基本要点 开始动手 BUG记录 如何使用ndnSIM运行自己的仿真实验 基本要点 仿真场景可以在NS-3目录下的scratch/ or src/ndnSI ...
- SpringBoot自定义FailureAnalyzer
官网说明 1.1 创建自己的 FailureAnalyzer FailureAnalyzer是一种在启动时拦截 exception 并将其转换为 human-readable 消息的好方法,包含在故障 ...
- linux入门 一些常见命令
chvt 切换终端 用法 1是终端 7是图形界面 sudo chvt 1 or 7 cp 复制文件/目录 -a : 通常在复制目录时使用,保存链接,文件属性并递归复制目录 -f:若文件在目标路径中则强 ...
- clientX、pageX、offsetX、screenX的区别
这几个属性的区别说难不难,可是很容易搞混,很长一段时间没用,发现又忘记区别了,记不清哪个是哪个!真的很抓狂! 区别: clientX.clientY: 相对于浏览器窗口可视区域的X,Y坐标(窗口坐标) ...
- RabbitMQ中Confirm确认与Return返回消息详解(八)
理解Confirm消息确认机制: 消息的确认,是指生产者投递消息后,如果Broker收到消息,则会给我们生产这一个应答. 生产者进行接收应答,用来确定这条消息是否正常的发送到Broker,这种方式也是 ...
- getAttribute和getParameter
getAttribute表示从request范围取得设置的属性,必须要先setAttribute设置属性,才能通过getAttribute来取得,设置与取得的为Object对象类型 getParame ...