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 ...
随机推荐
- C++ Opencv HoughLines()用霍夫变换在二元图像中寻线
一.霍夫变换简介 参考http://homepages.inf.ed.ac.uk/rbf/HIPR2/hough.htm 二.HoughLines()函数详解 该函数接受的输入矩阵只能是8位单通道的二 ...
- OAuth2简易实战（一）-四种模式
1. OAuth2简易实战(一)-四种模式 1.1. 授权码授权模式(Authorization code Grant) 1.1.1. 流程图 1.1.2. 授权服务器配置 配置授权服务器中 clie ...
- vue脚手架中使用axios
虽然之前用过n次,但大多都是直接在页面中引入axios.js的.今天想换种方式使用,一时间竟不知道怎么配置了.特此记录下. 1.npm 安装axios,文件根目录下安装,指令如下: npm inst ...
- [django]date类型和datetime类型过滤
搞清楚datetime.datetime和datetime.date模块 他们两个的格式区别 datetime模块 In [1]: from datetime import datetime In [ ...
- 深入Vue2.x的虚拟DOM diff原理
一.前言 Vue的核心是双向绑定和虚拟DOM(下文我们简称为vdom),关于双向绑定可以参阅木琴的文章<剖析Vue原理&实现双向绑定MVVM>,vdom是树状结构,其节点为vnod ...
- Mac 下使用svn
作为一个一直使用windows系统的人,还真不知道mac上的svn如何使用,偶然机会下现在需要. 查过后发现 mac 是自带svn的,在我装好xcode后,再安装 Command Line Tools ...
- oracle 时间日期常用语句及函数
记录常用时间函数以及处理时间的sql语句 (1)获得系统时间select sysdate from dual; (2)设置时间的格式select to_char(sysdate,'yyyy/MM/dd ...
- mysql 开发进阶篇系列 43 逻辑备份与恢复(mysqldump 的基于时间和位置的不完全恢复)
一. 概述 在上篇讲到了逻辑备份,使用mysqldump工具来备份一个库,并使用完全恢复还原了数据库.在结尾也讲到了误操作是不能用完全恢复的.解决办法是:我们需要恢复到误操作之前的状态,然后跳过误操作 ...
- vscode mysql v0.3插件 连接不了
环境: centos7.6 x64 python 3.6 插件mysql v0.3 解决办法:回滚插件版本v0.2.3 使用方法注意: https://www.cnblogs.com/-admin- ...
- 多线程编程学习笔记——使用异步IO
接上文 多线程编程学习笔记——使用并发集合(一) 接上文 多线程编程学习笔记——使用并发集合(二) 接上文 多线程编程学习笔记——使用并发集合(三) 假设以下场景,如果在客户端运行程序,最的事情之一是 ...