vue中的表单异步校验方法封装
在vue项目的开发中,表单的验证必不可少,在开发的过程中,用的是vue+iview的一套,我们知道iview的表单验证是基于async-validator,对于async-validator不熟悉的可以去官网看看,https://github.com/yiminghe/async-validator;
1.普通的自定义验证
<Col span="24">
<FormItem
label="确认密码"
prop="passwordrepeat"
class="login-bottom">
<Input
type="password"
v-model="formInline.passwordrepeat"
placeholder="再输一次">
</Input>
</FormItem>
</Col>
其中prop是必须的,所有的验证都是基于prop来进行的,
先在data里面定义方法validatePassCheck 如下:
const validatePassCheck = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.formInline.password) {
callback(new Error('两次密码输入不一致'));
} else {
callback();
}
};
接着写验证条件,把上面的方法写到validator
ruleInline: {
passwordrepeat: [
{ validator: validatePassCheck,required: true, trigger: 'blur' },
{ type: 'string', min: 4, message: '内容太短', trigger: 'blur' }
], },
这样存在的问题就是每个都要创建这个方法,会显得很麻烦,于是我们需要封装一个通用的函数来做异步校验
/*
**异步校验表单重复的方法
**传入json的格式
json={
url:'ssss', //验证需要的url
method:'get', //默认get方法
tip:'存储名称重复' //不写默认提示
response:exist //后端get方法返回重复提示的字段,默认为exist,exist为true代表重复
}
*/
Vue.prototype.checkBackNameRepeat = (json) => {
let url = json.url;
let editName = ""
//利用闭包返回一个函数,因为在vue文件中自定义的验证必须是个函数,闭包帮我们保存一些需要的东西
return function(rule, value, callback){//这三个参数是验证函数必须传入的,可以参考以上的validatePasscheck函数
let _url = url;
_url = _url.replace("{value}", value);
/*保存后端第一次返回数据,本次数据在编辑状态下不能算重复*/
if(json.edit && !editName){
editName = value;
}
if(editName == value){
callback();
return;
}
//head方法,返回404则代表不重复,否则就是重复
if( json.method && json.method.toUpperCase() === 'HEAD' ){
axios.head( _url ).then( (e) => {
callback( new Error( json.tip?json.tip:'名称重复' ) );//callback运行带有参数代表验证不通过
},( err)=>{
callback();//callback运行无参数代表验证通过
})
//剩下就是get方法,返回指定的条件才是重复和不重复的区别
}else{
axios.get( _url ).then( (e) => {
if( e.data.response[json.response] || e.data.response.exist ){
callback( new Error( json.tip?json.tip:'名称重复' ) );
}else{
callback();
}
},( err ) => {
callback();
})
}
}
}
上面写好了通用的方法后,在需要校验的vue文件引入该方法,然后在需要验证的字段的自定义验证validator执行这个方法,写入一些配置参数,该方法执行后会返回一个带三个参数的函数就是我们之前不封装需要的写法,如下,到目前,我们的异步校验封装就算完成了
rules:{
name:[
{ required: true, message: '存储名称是必须的', trigger: 'blur' },
{ pattern:/^([a-z0-9]([a-z0-9-.]*)[a-z0-9])$|^([a-z0-9])$/, message: '只能输入小写字母、数字、点号.和横线-并且点号 . 和横线 - 不能在开头或结尾', trigger: 'blur' },
{ min:2, message:'名称太短!',trigger:'blur'},
{ max:50, message:'名称太长!',trigger:'blur'},
{ validator: this.checkBackNameRepeat({
url:"wave/v1/pvc/" + this.$store.state.token.UserNamespace + "/{value}",
method:'head',
tip:'存储名称重复',
response:'exist'
}), trigger: 'blur' }
], }
vue中的表单异步校验方法封装的更多相关文章
- vue中form 表单常用校验封装(async-validator)
新建一个js校验文件validate.js export const regular = { // 验证自然数 naturalNumber: /^(([0-9]*[1-9][0-9]*)|(0+))$ ...
- html中form表单的使用方法和介绍
from表单的使用方法 一.表单赏析 二.了解表单功能:用于搜集不同类型的用户输入的内容 有了表单,网页的内容可以由用户自己创建,那么对于网页来说,我们既是网页创建都者,也是网页的消费者. 三.常用的 ...
- .net mvc中的表单异步提交
// // 摘要: // 将 <form> 开始标记写入响应. // // 参数: // ajaxHelper: // AJAX 帮助器. // // actionName: // 将处理 ...
- 纯小白入手 vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- vue中的表单
v-model指令实现表单双向绑定数据.触发文本框的input事件.一.文本框 <div id="J_app"> <p>{{ info }}</p&g ...
- VUE中关于表单提交的简单实现
main.js import Vue from "../vue.js"; import App from "./App.js"; //启动 new Vue({ ...
- Vue中Form表单验证无法消除验证问题
iView的表单api给出了一个resetFields方法,用于重置整个表单输入的内容并清除验证提示. 但是有时候需要只消除部分的iview的resetFields方法源码是这样的resetField ...
- vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)
文章目录 1.实现的效果 2.编写的js文件(这里写在了api文件下) 3.在vue页面中引入(script) 4.页面代码 1.实现的效果 20220606_154646 2.编写的js文件(这里写 ...
- vue中提交表单后如何清空
只需要在提交方法里写上this.form={brand_right:0}即可.
随机推荐
- 敏捷冲刺DAY3
一. 每日会议 1. 照片 2. 昨日完成工作 3. 今日完成工作 登录界面的进一步完善 服务器搭建 建立数据库 下一步任务的规划,展望 4. 工作中遇到的困难 工作中的困难:在进行模糊查询时,由于中 ...
- oracle 11g ADG实施手册(亲测,已成功部署多次)
一:实验环境介绍 虚拟机系统: RHEL Linux 6.4(64位) 数据库版本: Oracle 11gR2 11.2.0.4 (64位) IP地址规划: 主数据库 192.168.11 ...
- 第49天:封装自己的scrollTop
一.scroll家族 offset 自己的偏移scroll滚动的 scrollTop和scrollLeftscrollTop 被卷去的头部当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方的距离二.页面滚动 ...
- 窗口中各模块的切换效果,使用jquery实现
用到了两个js库,请自行下载,用到的背景图片可任意图片都可以,主要是看效果 <!DOCTYPE html> <html> <head> <script src ...
- BZOJ3167/BZOJ4824 HEOI2013SAO/CQOI2017老C的键盘(树形dp)
前者是后者各方面的强化版. 容易想到设f[i][j]表示i子树中第j小的是i的方案数(即只考虑相对关系).比较麻烦的在于转移.考虑逐个合并子树.容易想到枚举根原来的排名和子树根原来的排名,算一发组合数 ...
- 【刷题】BZOJ 2038 [2009国家集训队]小Z的袜子(hose)
Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命-- 具体来说,小Z把这N只 ...
- BZOJ4868:[SHOI2017]期末考试——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=4868 题目复制于洛谷:https://www.luogu.org/problemnew/show/P ...
- BZOJ3709 [PA2014]Bohater 【贪心】
题目链接 BZOJ3709 题解 贪心很显然 我们先干掉能回血的怪,当然按照\(d\)升序顺序,因为打得越多血越多,\(d\)大的尽量往后打 然后再干掉会扣血的怪,当然按照\(a\)降序顺序,因为最后 ...
- 学习web安全之--初识安全
随笔:随着互联网行业的飞速发展,互联网行业可谓日新月异,然而在繁华的背后,大多的互联网公司对于网络安全还是处于无重视,不作为的阶段,而作为一个程序员,如果也对信息安全视而不见的话,那将是这个公司的噩梦 ...
- JS实现的随机乱撞的彩色圆球特效代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...