简单的效验

 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 异步表单效验的更多相关文章

  1. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

  2. vue+element ui 重置表单

    <el-dialog :title="addForm.title" :visible.sync="dialogFormVisible" width=&qu ...

  3. Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

    Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...

  4. element ui form表单清空规则

    公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...

  5. 封装Vue Element的form表单组件

    前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...

  6. element ui FORM表单

    form表单 Form-Item Slot [label] 旧版语法 <el-form-item label="活动名称" prop="name"> ...

  7. vue+element 正则表达式进行表单验证

    <template> <el-form :model="form" label-width="115px" ref="form&qu ...

  8. vue+element之多表单验证

    方法一:利用promise var p1=new Promise(function(resolve, reject) { this.$refs[form1].validate((valid) => ...

  9. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

随机推荐

  1. linux运维、架构之路-redis

    一.redis介绍 Redis是一个开源,高级的键值存储和一个适用的解决方案,用于构建高性能,可扩展的Web应用程序. Redis属于非关系型数据库和Memcached类似,redis也是一个key- ...

  2. sass、less中的scoped属性

    1.scoped 的实现原理 Vue中的Less 中的 scoped 属性的效果主要是通过 PostCss 实现的.代码示例: //编译前 <template> <div class ...

  3. 倍增O(1)求区间&值与|值

    ;i<=n;++i) f[i][]=a[i],g[i][]=a[i]; ;(<<j)<=n;++j) ;(i+(<<j)-)<=n;i++) { f[i][j ...

  4. codeforces D Salary Changing

    题意:给你n个人,和s块钱,每个人都有一个工资区间,你给所有人都发工资.然后要他们工资的中位数最大. 思路:二分找那个值.那个值要满足至少有n/2+1个工资区间内. #include<cstdi ...

  5. Java关于Files. walkFileTree()

    1.使用Files. walkFileTree()找出指定文件夹下所有扩展名为.txt和.java的文件. package text_001; import java.io.IOException; ...

  6. Linux下JDK1.7升级1.8版本

    先下载 jdk-8u45-linux-x64.rpm 然后上传到  /usr/local/src  去.当然其他目录也可以.这里是默认位置 给所有用户添加可执行权限 #chmod +x jdk-8u4 ...

  7. css内容过长显示省略号的几种解决方法

    单行文本(方法一): 语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (clip这个参数是不常用的!) elli ...

  8. [CSP-S模拟测试]:大佬(kat)(数学期望)

    题目描述 辣鸡$ljh\ NOI$之后就退役了,然后就滚去学文化课了.他发现$katarina$大佬真是太强了,于是就学习了一下$katarina$大佬的做题方法.比如这是一本有$n$道题的练习册,$ ...

  9. animate(动画)框架 和 swiper (轮播)框架 的使用

    swiper.js 框架 网址:https://www.swiper.com.cn/ 是一个专门做轮播,切换特效的轮播 使用方法: 然后进入案例,通过案例来进行各种功能的实现, 这一步是教我们怎么做, ...

  10. 十九、python内置函数汇总

    '''内置函数abs():取绝对值all():每个元素都为真,才是真any():有一个元素为真即为真bin():十进制转二进制hex():十进制转十六进制int():所有的转成十进制oct():十进制 ...