element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head>
<body >
<div id="app">
<!--此处model的abc 要是下面input 绑定的对象名称, ref 要和提交按钮的submit参数 名称要一致-->
<el-form size="mini" :model="abc" ref="validateRef">
<!--此处的prop 和input 中abc的属性名称一致 -->
<el-form-item label="你好" prop="hello" :rules="[{required: true,message:'请输入',trigger:'blur'}
,{validator:validateCharacter,trigger:'blur'}
,{validator:validateFontSize,trigger:'blur'}
,{validator:validatePass,trigger:'blur'}]">
<el-input type="text" v-model="abc.hello" placeholder="请输入..." clearable></el-input>
</el-form-item>
</el-form>
<el-button @click="submit('validateRef')" type="primary" :loading="submitLoading">提交</el-button>
</div> <!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script> <script>
var context=[[${#request.getContextPath()}]];
var ArrayMap = new Vue({
el: '#app',
data: function () {
return {
abc: {
hello: '',
},
submitLoading:false,
}
},
methods: {
//特殊字符过滤
checkSpecificKey(str) {
var specialKey = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'";
for (var i = 0; i < str.length; i++) {
if (specialKey.indexOf(str.substr(i, 1)) != -1) {
return false;
}
}
return true;
}, //验证字符串
validatePass(rule,value,callback){
var that=this;
$.ajax({
url:context+"/abc?name="+that.abc.hello,
type:"GET",
async:false,
dataType:"json",
contentType:"application/json;charset=UTF-8",
data:{}
}).done(function(resp){
if(resp.data.isTrue){
callback();
}else{
callback(new Error("名称重复,请重新输入"))
}
})
},
//验证字符串
validateFontSize(rule,value,callback){
if(value.length<30){
callback();
}else{
callback(new Error("字符串长度在1-30之间"))
}
}, //验证字符串
validateCharacter(rule,value,callback){
if(this.checkSpecificKey(value)){
callback();
}else{
callback(new Error('请不要输入特殊字符:[`~!#$^&*()=|{}\':;\',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“\'。，、？]‘\''))
}
},
submit(data) {
this.submitLoading=true,
this.$refs[data].validate((valid) => {
if (valid) {
//验证成功,提交 return true;
} else {
//验证失败返回 return false;
}
;
})
},
}, }) </script> </body>
</html>
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项的更多相关文章
- vue validate多表单验证思考 之前写过一个里外层，现在觉得不合适，应该平行的写，然后都给ret，最后判断ret 再做出反应，这样整体表单的所有验证就都报验证，然后最后提交的时候把组件内的对象合并到总的对象，再提交
vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...
- Property 'validate' does not exist on type 'Element | Element[] | Vue | Vue[]'. Property 'valid...
使用vue-cli 3.0+Element-ui时候,调用form表单校验时候出现的问题是: Property 'validate' does not exist on type 'Element | ...
- element+vue点击新增表格内在已有数据添加一行带输入框内容
在element+vue项目中,需求要表格内已有数据,点击新增在首行添加一行带输入框内容 table的数据为datas=[],那么下面是一列的数据,多列可循环或复制 <el-table-colu ...
- Vue项目之实现登录功能的表单验证！
Vue项目之实现登录功能的表单验证! 步骤: 配置 Form表单验证; 1.必须给el-from组件绑定model 为表单数据对象 2 给需要验证的表单项 el-form-item 绑定 prop 属 ...
- Jquery Validate自定义验证规则，一个汉字等于两个字符长度
使用Jquery validate时写的一些东西,在这里做个笔记 在使用 Jquery validate 的minlength和maxlength进行文本框内容长度验证的时候,对于一个汉字的长度检测结 ...
- Element Vue 开箱即用框架如何使用-测试开发【提测平台】阶段小结(二)
微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 上一篇总结了后端服务接口的开发,这篇我们主要来总结下前后端分离开发中的前端部分,主要是开箱即用的框架介绍和之前章节组件的梳理和部分的扩展内 ...
- Yii2 关闭和打开csrf 验证 防止表单多次重复提交
原文地址:http://blog.csdn.net/terry_water/article/details/52221007 1.在Yii2配置中配置所有:所有的controller都将关闭csrf验 ...
- jquery validate 在ajax提交表单下的验证方法
$(function() { var method='${method }'; if(method == 'edit'){ url="${ctx}/commodity/typeReN ...
- 15：element/Vue Admin
1.1 简介 1.Vue Admin 简介 1. Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstra ...
随机推荐
- 第54节:Java当中的IO流(中)
Java当中的IO流(中) 删除目录 // 简书作者:达叔小生 import java.io.File; public class Demo{ public static void main(Stri ...
- python高级-面向对象特性(12)
一.继承的概念 在现实生活中,继承一般指的是子女继承父辈的财产,在程序中,继承描述的是事物之间的所属关系,例如猫和狗都属于动物,程序中便可以描述为猫和狗继承自动物:同理,波斯猫和巴厘猫都继承自猫,而沙 ...
- 《JavaScript总结》js模块化
模块化开发,可以让代码易于扩展.便于日后维护. ES6中的模块化 我们先了解一下 export(导出) 和 import(导入) 这两个关键字. 新建一个文件a.js 并且导出变量test expor ...
- java --Integer 学习
本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 在网上看到一个面试题,没有完全做, 本代码基于JDK8 //下面代码运行结果是 public class ...
- vSphere 软件组件
vSphere 包括以下软件组件: ESXi 一种虚拟化平台,您可使用此平台将虚拟机创建为一组配置和磁盘文件,它们可共同执行物理机的所有功能. 通过 ESXi,可以运行虚拟机,安装操作系统,运行应用程 ...
- MySQL数据库——表操作
I.表操作 一.创建表 基本语法如下: create table 表名( 列名 类型 是否可以为空, 列名 类型 是否可以为空 )ENGINE=InnoDB DEFAULT CHARSET=utf8: ...
- Spring mybatis源码篇章-MapperScannerConfigurer关联dao接口
前言:Spring针对Mybatis的XML方式的加载MappedStatement,通过引入MapperScannerConfigurer扫描类来关联相应的dao接口以供Service层调用.承接前 ...
- SpringCloud(1) 架构演进和基础知识简介
一.传统架构演进到分布式架构 简介:讲解单机应用和分布式应用架构演进基础知识 (画图) 高可用 LVS+keepalive 1.单体应用:开发速度慢.启动时间长.依赖庞大.等等 2.微服务:易开发.理 ...
- 简化开发：Lombok的使用
Java中优雅的使用Lombok 1.简介 Lombok 是一种 Java实用工具,可用来帮助开发人员消除Java的冗长,尤其是对于简单的Java对象(POJO), 它通过注释实现这一目的.一个标准的 ...
- shell编程基础(四): shell脚本语法之函数及调试
一.Shell脚本中的函数 和C语言类似,Shell中也有函数的概念,但是函数定义中没有返回值也没有参数列表.例如: #! /bin/sh fun(){ echo "Function fun ...