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" rel="external nofollow" >
</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之间"))
weixin_38618094
- 粉丝: 4
- 资源: 912
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0