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>
