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 ...
随机推荐
- linux运维、架构之路-redis
一.redis介绍 Redis是一个开源,高级的键值存储和一个适用的解决方案,用于构建高性能,可扩展的Web应用程序. Redis属于非关系型数据库和Memcached类似,redis也是一个key- ...
- sass、less中的scoped属性
1.scoped 的实现原理 Vue中的Less 中的 scoped 属性的效果主要是通过 PostCss 实现的.代码示例: //编译前 <template> <div class ...
- 倍增O(1)求区间&值与|值
;i<=n;++i) f[i][]=a[i],g[i][]=a[i]; ;(<<j)<=n;++j) ;(i+(<<j)-)<=n;i++) { f[i][j ...
- codeforces D Salary Changing
题意:给你n个人,和s块钱,每个人都有一个工资区间,你给所有人都发工资.然后要他们工资的中位数最大. 思路:二分找那个值.那个值要满足至少有n/2+1个工资区间内. #include<cstdi ...
- Java关于Files. walkFileTree()
1.使用Files. walkFileTree()找出指定文件夹下所有扩展名为.txt和.java的文件. package text_001; import java.io.IOException; ...
- Linux下JDK1.7升级1.8版本
先下载 jdk-8u45-linux-x64.rpm 然后上传到 /usr/local/src 去.当然其他目录也可以.这里是默认位置 给所有用户添加可执行权限 #chmod +x jdk-8u4 ...
- css内容过长显示省略号的几种解决方法
单行文本(方法一): 语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (clip这个参数是不常用的!) elli ...
- [CSP-S模拟测试]:大佬(kat)(数学期望)
题目描述 辣鸡$ljh\ NOI$之后就退役了,然后就滚去学文化课了.他发现$katarina$大佬真是太强了,于是就学习了一下$katarina$大佬的做题方法.比如这是一本有$n$道题的练习册,$ ...
- animate(动画)框架 和 swiper (轮播)框架 的使用
swiper.js 框架 网址:https://www.swiper.com.cn/ 是一个专门做轮播,切换特效的轮播 使用方法: 然后进入案例,通过案例来进行各种功能的实现, 这一步是教我们怎么做, ...
- 十九、python内置函数汇总
'''内置函数abs():取绝对值all():每个元素都为真,才是真any():有一个元素为真即为真bin():十进制转二进制hex():十进制转十六进制int():所有的转成十进制oct():十进制 ...