简单的效验

 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. 自己动手实现一个网络模型 python

    转自:https://www.jianshu.com/p/4b30e1dd2252 common_funcs.py import numpy as np import matplotlib.pyplo ...

  2. 关于vs2019

    一.vs2019中的MFC 在想创建一个基于对话的应用时找不着模版了,这下可慌了,试遍了已有的各个模版都没要,要么就是缺少头文件,我在想是不是少安装了什么选项.重装了相关模块,最后又核对了一遍,都对. ...

  3. 开发工具Intellij IDEA:常用快捷键

    重命名:shift + F6 查看Javadoc/详情:ctrl + Q 查找接口的实现类:ctrl + alt + B format代码:ctrl + alt + L 全局查询:ctrl + shi ...

  4. vue.js动态表格增删改代码

    新建一个html文件,内容如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...

  5. ndn挖坑记(二)

    目录 如何使用ndnSIM运行自己的仿真实验 基本要点 开始动手 BUG记录 如何使用ndnSIM运行自己的仿真实验 基本要点 仿真场景可以在NS-3目录下的scratch/ or src/ndnSI ...

  6. SpringBoot自定义FailureAnalyzer

    官网说明 1.1 创建自己的 FailureAnalyzer FailureAnalyzer是一种在启动时拦截 exception 并将其转换为 human-readable 消息的好方法,包含在故障 ...

  7. linux入门 一些常见命令

    chvt 切换终端 用法 1是终端 7是图形界面 sudo chvt 1 or 7 cp 复制文件/目录 -a : 通常在复制目录时使用,保存链接,文件属性并递归复制目录 -f:若文件在目标路径中则强 ...

  8. clientX、pageX、offsetX、screenX的区别

    这几个属性的区别说难不难,可是很容易搞混,很长一段时间没用,发现又忘记区别了,记不清哪个是哪个!真的很抓狂! 区别: clientX.clientY: 相对于浏览器窗口可视区域的X,Y坐标(窗口坐标) ...

  9. RabbitMQ中Confirm确认与Return返回消息详解(八)

    理解Confirm消息确认机制: 消息的确认,是指生产者投递消息后,如果Broker收到消息,则会给我们生产这一个应答. 生产者进行接收应答,用来确定这条消息是否正常的发送到Broker,这种方式也是 ...

  10. getAttribute和getParameter

    getAttribute表示从request范围取得设置的属性,必须要先setAttribute设置属性,才能通过getAttribute来取得,设置与取得的为Object对象类型 getParame ...