vee-validate校验demo
//太长了，把异步校验放到前面吧；
VeeValidate.Validator.extend('checkLoginName',{
getMessage:function () {
return "用户名已存在";
},
validate: value => {
//后台url
let havaurl = [[@{/user/checkLoginName}]]+'?loginName='+value,
val
const promise = new Promise(function(resolve, reject) {
$.get(havaurl,data=>{
console.log(data)
var boo=false;
if(data.code=='000'){
boo=false;
}else {
boo=true;
}
//此处data返回一个布尔值，false为已存在，true为不存在
resolve(boo)
})
})
//必须返回一个promise对象，否则报错
return promise.then((val)=>{
return !val //val值取反
})
}
});
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>注册</title>
<div th:replace="head"></div>
<style>
img {
width: 5em;
}
/*校验样式*/
.is-danger {
border: 1px solid red;
}
.is-danger>span{
display: block;
}
.is-danger+span{
display: block;
}
</style>
</head>
<body>
<div id="form">
<div th:include="top :: html"></div>
<div class="register-box">
<div class="register-container">
<div class="register-choose-btn clear">
<div class="fl register-choose-person">
<span class="register-choose-person-blue" v-on:click="clickTitle(1)">个人</span>
</div>
<div class="fr register-choose-work">
<span class="register-choose-person-gray" v-on:click="clickTitle(2)">单位</span>
</div>
</div> <div class="register-person-container">
<!-- 单位 -->
<div class="register-work-container" v-show="workShow">
<div class="register-person-tatol clear">
<span class="fl register-person-cue">单位名称:</span>
<div class="fl register-person-input">
<input type="text" :class="{'is-danger': errors.has('unitName') }" v-validate="{required: workShow==true,unitName:workShow==true}" name="unitName" v-model="unitName" placeholder="请填写单位全称">
<span v-show="errors.has('unitName')" style="display:none;color: red;font-size: 12px;">{{ errors.first('unitName') }}</span>
</div>
</div>
<div class="register-person-tatol clear">
<span class="fl register-person-cue">证照类型:</span>
<div class="fl register-person-input">
<select v-model="unitCardType" name="unitCardType" :class="{'is-danger': errors.has('unitCardType') }" v-validate="{required: workShow==true,unitCardType:workShow==true}" class="register-person-256">
<option v-for="item in unitCardTypes" v-bind:value="item.value">{{item.text}}</option>
</select>
<span v-show="errors.has('unitCardType')" style="display:none;color: red;font-size: 12px;">{{ errors.first('unitCardType') }}</span>
<!--<input class="register-person-256" type="text" name="unitCardType" v-model="unitCardType" placeholder="选择证照类型">-->
</div>
</div>
<div class="register-person-tatol clear">
<span class="fl register-person-cue">证照编号:</span>
<div class="fl register-person-input">
<input type="text" :class="{'is-danger': errors.has('unitCardId') }" v-validate="{required: workShow==true,unitCardId:workShow==true}" name="unitCardId" v-model="unitCardId" placeholder="请填写证件照编号">
<span v-show="errors.has('unitCardId')" style="display:none;color: red;font-size: 12px;">{{ errors.first('unitCardId') }}</span>
</div>
</div>
<div class="register-person-tatol clear">
<span class="fl register-person-cue">单位证件照片:</span> <div class="fl register-person-input clear">
<div class="card-img-show">
<img :src="unitImgDataUrl" class="addWorkFile">
<input class="register-person-260-upload fl" :class="{'is-danger': errors.has('unitCardImg') }" v-validate="{required: workShow==true,unitCardImg:workShow==true}" v-on:change="getFile($event)" id="addWorkFile" type="file" name="unitCardImg"
placeholder="请上传证件照">
<!--<span v-on:click="submitForm($event)" id="addWorkFile2" class="register-person-upload fr" style="margin-left: 9px">
上传
</span>-->
<p v-show="errors.has('unitCardImg')" style="display:none;color: red;font-size: 12px;">{{ errors.first('unitCardImg') }}</p>
<p class="card-img-show-p">上传加盖公章的单位证照复印件照片，文件格式为.jpg，大小不超过3M</p>
</div> </div> </div>
</div>
<!-- 单位 -->
<div class="register-person-tatol clear">
<span class="fl register-person-cue">联系人姓名:</span>
<div class="fl register-person-input">
<input type="text" name="realName" :class="{'is-danger': errors.has('realName') }" v-validate="'required|realName'" v-model="realName" placeholder="请填写联系人姓名">
<span v-show="errors.has('realName')" style="display:none;color: red;font-size: 12px;">{{ errors.first('realName') }}</span>
</div>
</div>
<div class="register-person-tatol clear">
<span class="fl register-person-cue">联系人邮箱:</span>
<div class="fl register-person-input">
<input type="text" name="userMail" :class="{'is-danger': errors.has('userMail') }" v-validate="'required|email'" v-model="userMail" placeholder="请填写联系人邮箱">
<span v-show="errors.has('userMail')" style="display:none;color: red;font-size: 12px;">{{ errors.first('userMail') }}</span>
</div>
</div>
<div class="register-person-tatol clear">
<span class="fl register-person-cue">证件类型:</span>
<div class="fl register-person-input">
<select v-model="cardType" name="cardType" :class="{'is-danger': errors.has('cardType') }" v-validate="'required|cardType'" class="register-person-256">
<option v-for="item in items" v-bind:value="item.value">{{item.text}}</option>
</select>
<span v-show="errors.has('cardType')" style="display:none;color: red;font-size: 12px;">{{ errors.first('cardType') }}</span>
<!--<input class="register-person-256" type="text" name="cardType" v-model="cardType" placeholder="选择证照类型">-->
</div>
</div>
<div class="register-person-tatol clear">
<span class="fl register-person-cue">证件编号:</span>
<div class="fl register-person-input">
<input class="register-person-256" type="text" :class="{'is-danger': errors.has('cardId') }" v-validate="'required|cardId'" name="cardId" v-model="cardId" placeholder="请填写证件照编号">
<span v-show="errors.has('cardId')" style="display:none;color: red;font-size: 12px;">{{ errors.first('cardId') }}</span>
</div>
</div>
<div class="register-person-tatol clear">
<span class="fl register-person-cue">证件照片:</span>
<div class="fl register-person-input">
<div class="card-img-show"><img class="addPersonFile" :src="personImgDataUrl" >
<input class="register-person-260-upload" :class="{'is-danger': errors.has('cardImg') }" v-validate="'required|unitCardImg'" name="cardImg" type="file" id="addPersonFile" v-on:change="getFile($event)"
placeholder="请上传证件照">
<p v-show="errors.has('cardImg')" style="display:none;color: red;font-size: 12px;">{{ errors.first('cardImg') }}</p>
<!-- <input class="register-person-260" v-on:change="uploadChange" id="addPersonFile" type="file" name="cardImg"
placeholder="请上传证件照">-->
<!--<span v-on:click="submitForm($event)" id="addPersonFile2" class="register-person-upload fr">
上传
</span>-->
<p class="card-img-show-p">文件格式为.jpg，大小不超过3M</p>
</div>
</div>
</div>
<div class="register-person-tatol clear">
<span class="fl register-person-cue">联系人手机号:</span>
<div class="fl register-person-input">
<input type="text" name="userPhone" :class="{'is-danger': errors.has('userPhone') }" v-validate="'required|userPhone'" v-model="userPhone" placeholder="请填写联系人手机号">
<span v-show="errors.has('userPhone')" style="display:none;color: red;font-size: 12px;">{{ errors.first('userPhone') }}</span>
</div>
</div>
<div class="register-person-tatol clear">
<span class="fl register-person-cue">验证码:</span>
<div class="fl register-person-input">
<input class="register-person-260" :class="{'is-danger': errors.has('code') }" v-validate="'required|code'" maxlength="6" type="text" name="code" v-model="code" placeholder="请填写验证码">
<button id="registerCode" v-on:click="sendMessages('registerCode',userPhone,smsUrl)" class="register-person-upload fr">
获取验证码
</button>
<p v-show="errors.has('code')" style="margin-top:47px!important;display:none;color: red;font-size: 12px;">{{ errors.first('code') }}</p>
</div>
</div>
<div class="register-person-tatol clear">
<span class="fl register-person-cue">用户名:</span>
<div class="fl register-person-input" style="width: auto">
<input class="" type="text" name="userName" :class="{'is-danger': errors.has('userName') }" v-validate="'required|userName'" v-model="userName" placeholder="请填写用户名">
<span v-show="errors.has('userName')" style="display:none;color: red;font-size: 12px;">{{ errors.first('userName') }}</span>
<p>长度为2至20个字符，允许包含汉字、大小写英文字母、数字及下划线等</p>
</div>
</div>
<div class="register-person-tatol clear">
<span class="fl register-person-cue">密码:</span>
<div class="fl register-person-input">
<input class="" type="password" name="password" :class="{'is-danger': errors.has('password') }" v-validate="'required|password'" v-model="password" placeholder="8-20位密码，需包含大小字母及数字">
<span v-show="errors.has('password')" style="display:none;color: red;font-size: 12px;">{{ errors.first('password') }}</span>
<p>长度8至20位，须包含大小写字母及数字</p>
</div>
</div>
<div class="register-person-tatol clear">
<span class="fl register-person-cue">确认登录密码:</span>
<div class="fl register-person-input">
<input type="password" name="repassword" :class="{'is-danger': errors.has('repassword') }" v-validate="'required|confirmed:password'" v-model="repassword" placeholder="请再次输入登录密码">
<span v-show="errors.has('repassword')" style="display:none;color: red;font-size: 12px;">{{ errors.first('repassword') }}</span>
</div>
</div>
<button class="register-porson-btn" type="button" name="button" :disabled="submitDisabled"
v-on:click="submit()">立即注册
</button>
</div>
</div>
<div class="dong-hua">
<p class="dong-hua-chuan">上传中</p >
<div class="loader-05">
</div>
</div>
</div>
<div th:include="foot :: html"></div>
</div>
</body>
<script th:inline="javascript">
/*<![CDATA[*/
VeeValidate.Validator.localize('zh_CN');
VeeValidate.Validator.localize({
zh_CN:{messages:{
required:function (name) {
return name+"不能为空";
}
},attributes:{
unitName:'单位名称',
unitCardType: '证照类型',
unitCardId: '证照编号',
unitCardImg: '单位证件照片',
realName: '联系人姓名',
userMail: '联系人邮箱',
cardType: '证件类型',
cardId: '证件编号',
cardImg: '证件照片',
userPhone: '联系人手机号',
code: '验证码',
userName: '用户名',
password: '密码',
repassword: '确认登录密码',
}
}
});
VeeValidate.Validator.extend('unitName',{
getMessage:function () {
return "请输入正确单位名称";
},
validate:function (value) {
return /^(([\u4e00-\u9fff]{2,50})|([a-z\.\s\,\(\)（）]{2,50}))$/i.test(value);
}
});
VeeValidate.Validator.extend('unitCardId',{
getMessage:function () {
return "请输入正确证照编号";
},
validate:function (value) {
return /^[a-zA-Z0-9]{10,20}$/.test(value);
}
});
VeeValidate.Validator.extend('realName',{
getMessage:function () {
return "输入正确的联系人名称";
},
validate:function (value) {
return /^[\u4e00-\u9fa5a-zA-Z\s]{2,20}$/.test(value);
}
});
VeeValidate.Validator.extend('cardId',{
getMessage:function () {
return "输入正确的证件编号";
},
validate:function (value) {
return /^[a-zA-Z0-9]{10,20}$/.test(value);
}
});
VeeValidate.Validator.extend('userPhone',{
getMessage:function () {
return "输入正确的手机号";
},
validate:function (value) {
return /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/.test(value);
}
});
VeeValidate.Validator.extend('code',{
getMessage:function () {
return "输入6位数字验证码";
},
validate:function (value) {
return /^[0-9]{6}$/.test(value);
}
});
VeeValidate.Validator.extend('userName',{
getMessage:function () {
return "请输入正确用户名";
},
validate:function (value) {
return /^[\u4e00-\u9fa5_a-zA-Z0-9]{2,20}$/.test(value);
}
});
VeeValidate.Validator.extend('password',{
getMessage:function () {
return "请输入正确密码";
},
validate:function (value) {
return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_]{8,20}$/.test(value);
}
});
VeeValidate.Validator.extend('cardType',{
getMessage:function () {
return "请选择证件类型";
},
validate:function (value) {
return !!value;
}
});
VeeValidate.Validator.extend('unitCardType',{
getMessage:function () {
return "请选择证照类型";
},
validate:function (value) {
return !!value;
}
}); VeeValidate.Validator.extend('unitCardImg',{
getMessage:function () {
return "上传照片！";
},
validate:function (value) {
return !!value;
}
}); Vue.use(VeeValidate);
var InterValObj; //timer变量，控制短信时间
var vue = new Vue({
el: "#form",
data: {
personFileName:'文件格式为.jpg，大小不超过3M',
workFileName:'上传加盖公章的单位证照复印件照片，文件格式为.jpg，大小不超过3M',
unitImgDataUrl:'',
personImgDataUrl:'',
//使用时将最后一个1去掉
smsUrl:[[@{/common/sendSMS}]],
workShow: false,
unitCardTypes: [{text: '选择证照类型', value: ''}, {text: '工商营业执照', value: '101'}, {
text: '有关政府部门的批文',value: '102'},
{text: '事业单位法人证书', value: '105'}, {text: '登记证书', value: '103'},
{text: '其他证照', value: '104'}],
items: [{text: '选择证件类型', value: ''}, {text: '居民身份证件', value: '101'}, {
text: '军人身份证件',
value: '102'
}, {text: '武警身份证件', value: '103'},
{text: '港澳台居民通行证', value: '104'}, {text: '外国公民护照', value: '105'}, {text: '其他证件', value: '106'}],
submitDisabled: false,
unitName: '',
unitCardType: '',
unitCardId: '',
unitCardImg: 'test1.jpg',
realName: '',
userMail: '',
cardType: '',
cardId: '',
cardImg: 'test2.jpg',
userName: '',
userPhone: '',
code: '',
password: '',
repassword: '',
userType: '100',
file: '',
file2: '',
isUpload:true,
},
methods: {
getFile(event) {
let eventId = event.target.id;
let type= testImgType(eventId);
if(!type){
return;
}
let fileName = event.target.files[0].name;
let max = testMaxSize(event.target.files[0],1024*3*1024);
if(!max){
return;
}
if(eventId=='addWorkFile'){
this.file = event.target.files[0];
this.workFileName=fileName;
}else{
this.file2 = event.target.files[0];
this.personFileName=fileName;
}
/* },
submitForm(event) {
let eventId = event.target.id;
event.preventDefault();*/
let formData = new FormData();
if(eventId=='addWorkFile'){
formData.append('file', this.file);
}else{
formData.append('file', this.file2);
} let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
$(".dong-hua").css("display","block");
this.$http.post([[@{/common/uploadFile}]], formData, config).then(function (res) {
$(".dong-hua").css("display","none");
if (res.data.code == '000') {
if(eventId=='addWorkFile'){
$("img.addWorkFile ").css("height","4em");
this.unitImgDataUrl=res.data.data;
}else {
$("img.addPersonFile").css("height","4em");
this.personImgDataUrl=res.data.data;
}
}
})
}, //提交
submit(){
this.$validator.validateAll().then((result) => {
if (result) {
this.submitDisabled = true;
if(this.password!=this.repassword){
this.submitDisabled = false;
this.open("两次输入的密码不一致","001");
return;
}
var json = {
'userType': this.userType,
'companyName': this.unitName,
'companyCardType': this.unitCardType,
'companyCardId': this.unitCardId,
'companyCardImg': this.unitImgDataUrl,
'userName': this.realName,
'userMail': this.userMail,
'cardType': this.cardType,
'cardId': this.cardId,
'cardImg': this.personImgDataUrl,
'loginName': this.userName,
'userPhone': this.userPhone,
'code': this.code,
'loginPwd': this.password,
};
let postUrl = [[@{/user/businessUserRegister}]];
this.$http.post(postUrl, json, {emulateJSON: true}).then(
(response)=> {
console.log(response.data)
this.submitDisabled = false;
if(response.data.code == '000'){
this.openMsg("<p>注册完成，请等待审核结果！<br/><br/>" +
"您提交的注册信息需要审核1-2个工作日，请您耐心等待！</p>");
}else {
this.open(response.data.msg,response.data.code);
}
}
)
}else {
console.log("提交失败！")
}
})
},
//选择标签
clickTitle: function (type) {
if (type == 1) {
this.userType='100';
this.workShow = false;
$(".register-choose-person .register-choose-person-blue").css("color", "#009FDF");
$(".register-choose-work .register-choose-person-gray").css("color", "#4A4A4A");
} else if (type == 2) {
this.userType='200';
this.workShow = true;
$(".register-choose-person .register-choose-person-blue").css("color", "#4A4A4A");
$(".register-choose-work .register-choose-person-gray").css("color", "#009FDF");
}
}, //发送短信验证码
sendMessages(id,phone,url){
sendSms(id,phone,url,InterValObj);
},
//提示信息
open: function (msg, code) {
if (code == '000') {
this.$alert(msg, '提示', {
confirmButtonText: '确定',
type: 'success',
callback: action => {
this.openMsg("<p>注册完成，请等待审核结果！<br/><br/>" +
"您提交的注册信息需要审核1-2个工作日，请您耐心等待！</p>"); }
});
} else {
this.$alert(msg, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
},
toIndex(){
window.open([[@{/user/showHtml}]],"_self");
},
openMsg(msg) {
this.$confirm(msg, '', {
confirmButtonText: '确定',
showCancelButton:false,
dangerouslyUseHTMLString: true,
closeOnClickModal:false,
showClose:false,
center: true,
type: ''
}).then(() => {
this.toIndex();
}).catch(() => { });
}
},
created:function() {
$("#model5").addClass("li-btn");
var v = getCookieValue("secondsremained") ? getCookieValue("secondsremained") : 0;//获取cookie值
if(v > 0) {
$("#registerCode").attr("disabled", true);
settime("registerCode",InterValObj,v,"secondsremained"); //开始倒计时
}
},
})
/*]]>*/
</script>
</html>
vee-validate校验demo的更多相关文章
- 编写自己的validate校验框架原理（转）
原文链接:http://blog.csdn.net/a973893384/article/details/51517388 具体思路: 我们使用自定义注解实现.然后需要解决的是两个问题: 1是如何扫描 ...
- jquery.validate校验文件使用说明
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库<script src="../js/ ...
- Struts2 validate校验
一般的,用户注册的时候,我们需要校验一些用户提交过来的参数. 一般有两道屏障,一是在前台页面上使用js进行验证,直接杜绝了不正常信息的提交.二是将提交过来的信息进行验证,不通过则返回注册页面并显示错误 ...
- jquery validate 校验使用总结
一.jquery.validator表单验证id和name问题 因为后台是struts,表单提交,所有输入框的值保存在name=对象.名字中,而jquery.validator表单验证用的是name, ...
- JSR303完成validate校验并编写BeanValidator工具类
一.引入pom依赖 <!-- validator --> <dependency> <groupId>javax.validation</groupId> ...
- 登录校验(demo)
1. 登录流程分析图: 2. 登录demo:
- struts2 校验demo
综合练习: <validators> <field name="username"> <field-validator type="requ ...
- jquery validate 小demo
方便学习: 直接上代码: ceshi.html: <!DOCTYPE html> <html> <head> <meta http-equiv="C ...
- ajax用户名校验demo详解
//用户名校验的方法 //这个方法使用XMLHTTPRequest对象进行AJAX的异步数据交互 var xmlhttp; function verify(){ //1.使用dom的方式获取文本框中的 ...
随机推荐
- 2)实现github自动登陆获取信息
# -*- coding:utf-8 -*- # __author__ = 'lixiang' # 实现github自动登陆和获取数据 import requests from bs4 import ...
- VM_Centos7.3_X64_安装Oracle12C 总结笔记
声明:本文居多内容参考原文来之网络: 一:安装Centos7.3 虚拟机 1:操作系统下载 CentOS 7官方下载地址:https://www.centos.org/download/ 说明:本案例 ...
- Confluence 6 配置 Office 连接器选项
具有系统管理员权限的用户可以配置 Office 连接器的属性和相关表现. 希望设置 Office 连接器的配置属性: 进入 > 基本配置(General Configuration) > ...
- Windows 系统共享文件扫描
近年来历次泄露的安全事故(工控安全),其主要原因就是内部网络自身的脆弱性问题.对于内部网络的安全检查是很必要的.传统上使用CMD命令 net view 就可以扫描在线的主机但是,主机设置取消QOS的 ...
- CSS3媒体查询的部分重要属性
width:视口宽度 height:视口高度 device-width:渲染表面的宽度,就是设备屏幕的宽度 device-height:渲染表面的高度,就是设备屏幕的高度 orientation:检查 ...
- WIN7 启动屏幕键盘
点击“开始”或按快捷键“WIN”,输入“osk”后,按“回车键”确定,就可以启动屏幕键盘. 屏幕键盘 另一种方法是进入“控制面板”: 再进入“轻松访问中心”: 选择“启动屏幕键盘”,这样也可以启动屏幕 ...
- python面向对象三大特性-多态
import abc #利用abc模块实现抽象类 class All_file(metaclass=abc.ABCMeta): all_type='file' @abc.abstractmethod ...
- 通过自定义比较器排序（C#版）
一.方法概述 自定义比较器需要实现接口IComparer<T> 二.示例过程 1.新建一个Product产品类 /// <summary> /// 产品类 /// </s ...
- 正则re模块
正则表达式的特殊字符: 语法: re.match(正则语法,字符串) # re.match() 为关键字 group(1) # 取出第一个匹配 括号中的值,1位第一个括号内的值 1. 特殊字符 1 . ...
- .NetCore 下开发独立的（RPL）含有界面的组件包 （四）授权过滤
.NetCore 下开发独立的(RPL)含有界面的组件包 (一)准备工作 .NetCore 下开发独立的(RPL)含有界面的组件包 (二)扩展中间件及服 务 .NetCore 下开发独立的(RPL)含 ...