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 ...
随机推荐
- 4.TableLayout、回调接口
会话详情页 listview条目布局 列,当第0列的内容过多时,不至于将其他列的内容,挤出屏幕 --> <TableLayout android:id="@+id/tl_rece ...
- Android APK安装过程学习笔记
1.什么是APK APK,即Android Package,Android安装包.不同平台的安装文件格式都不同,类似于Windows的安装包是二进制的exe格式,Mac的安装包是dmg格式.APK可以 ...
- OAuth2.0认证详解
目录 什么是OAuth协议 OAuth2.0是为了解决什么问题? OAuth2.0成员和授权基本流程 OAuth2.0成员 OAuth2.0基本流程 什么是OAuth协议 OAuth 协议为用户资源的 ...
- eureka相关异常
1. eureka相关异常 1.1. 异常信息 Error creating bean with name 'eurekaAutoServiceRegistration': Singleton bea ...
- strace命令用法
-tt 在每行输出的前面,显示毫秒级别的时间 -T 显示每次系统调用所花费的时间 -v 对于某些相关调用,把完整的环境变量,文件stat结构等打出来. -f 跟踪目标进程,以及目标进程创建的所有子进程 ...
- 2.MySQL(二)
数据之表操作 1.创建表 语法:CREATE TABLE table_name (column_name column_type); create table student( -> id IN ...
- HP C7000刀片服务器开关机过程
HP C7000开关机过程 一.HP C7000关机过程 1.关闭台刀片服务器. 2.确认刀片已关机后,登录https://xxx.xxx.xxx.x/,Administrator/2PF2QT, ...
- mysql 开发进阶篇系列 46 物理备份与恢复( xtrabackup的 选项说明，增加备份用户，完全备份案例)
一. xtrabackup 选项说明 在操作xtrabackup备份与恢复之前,先看下该工具的选项,下面记录了xtrabackup二进制文件的部分命令行选项,后期把常用的选项在补上.点击查看xtrab ...
- java~springboot~h2数据库在单元测试中的使用
单元测试有几点要说的 事实上springboot框架是一个tdd框架,你在进行建立项目时它会同时建立一个单元测试项目,而我们的代码用例可以在这个项目里完成,对于单元测试大叔有以下几点需要说明一下: 单 ...
- 解决AssetBundle包加载预制体时，Shader显示异常的问题
现象: 预制体上的粒子效果显示为紫色方块. 原因:shader在打成AB包后与指定平台产生相关性,Editor中无法正常读取. 解决办法: 遍历所有加载的对象,重新赋值Shader 代码: //修正s ...