vee-validate校验demo
2024-06-16 05:34:04
//太长了，把异步校验放到前面吧；
VeeValidate.Validator.extend('checkLoginName',{getMessage:function () {return "用户名已存在";},validate: value => { //后台urllet havaurl = [[@{/user/checkLoginName}]]+'?loginName='+value,valconst 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>
转载于:https://www.cnblogs.com/SimonHu1993/p/9290436.html
vee-validate校验demo相关推荐
- jquery validate 校验
前言 最近在开发过程中使用到了前端校验,所以呢就用到了jquery validate ,该插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该 ...
- java validate校验_自定义工具类实现validate参数校验
前言 相信项目中做一些htttp接口,避免不了要对参数进行校验,大多数情况下,其实我们只是校验是否为NULL就可以了 1.通过注解实现各种状态的字段 1.1.引入依赖 默认的版本是6.0.9.Fina ...
- validate校验及自定义验证规则
1.默认校验 (1).required:true 必输字段 (2).remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入 ...
- Iris——整合go-playground/validator参数校验Demo
源代码:https://gitee.com/shentuzhigang/mini-project/blob/master/iris_validator 解决方案 go.mod require (git ...
- Spring Boot + 微信小程序——登录凭证校验DEMO
基本概念 微信小程序-登录凭证校验:通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程. 微信小程序API https://developers.weix ...
- JS 触发 validate 校验方法
调用valid()方法 JS代码 if ($("#fromId").valid()) {console.log("校验通过") }else { return f ...
- jQuery validate表单验证demo
Query Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 官方文档 http://jqueryvalidation. ...
- springboot使用hibernate validator校验
回到顶部 一.参数校验 在开发中经常需要写一些字段校验的代码,比如字段非空,字段长度限制,邮箱格式验证等等,写这些与业务逻辑关系不大的代码个人感觉有两个麻烦: 验证代码繁琐,重复劳动 方法内代码显得冗 ...
- Spring Boot参数校验
1. 概述 作为接口服务提供方,非常有必要在项目中加入参数校验,比如字段非空,字段长度限制,邮箱格式验证等等,数据校验常用到概念: JSR303/JSR-349: JSR303是一项标准,只提供规范不 ...
最新文章
- sumif三个条件怎么填_Excel条件求和函数sumif详解及应用
- SDN(软件定义网络)
- spring知识概要
- IDEA控制台输出中文乱码日志文件正常
- sublimelinter-php 错误代码提示
- VS2010插件之NuGet
- 开篇词：如何轻松获得 Offer
- c 中html抓取页面图片,【教程】抓取网并提取网页中所需要的信息 之 C#版
- OpenCV使用BGR而非RGB格式
- 迅雷手机版苹果版_IOS手机迅雷下载（支持苹果手机和ipad）
- 零基础学习云计算需要准备什么？
- 文件怎么设置密码？一文带你看到文件加密的方法
- JS中的对象和方法简单剖析
- mysql 幻读 mvcc_MVCC 能解决幻读吗？
- 低版本ie浏览器禁用提示
- Unity间接光 ibl（基于图像的渲染）和SH（球谐光照）
- 拉普拉斯分布和拉普拉斯变换有什么区别
- Sharding-JDBC（二）- Sharding-JDBC介绍
- Python requests爬取淘宝商品信息
- mysql innodb 数据打捞（二）innodb 页面打捞编程
热门文章
- markdown editor_基于 Vue+Vditor 所见即所得Markdown编辑器
- java qq音乐接口 api,QQ音乐解析API接口更新:支持HQ,ape,flac无损音质,缓存功能
- wxpython应用程序对象与顶级窗口_wxPython 基础 | 学步园
- 优化自定义函数_玩转reacthooks,自定义hooks设计模式及其实战
- 工业机器人 郝卫东_2020年第一季度工业技术（T类）馆配畅销榜TOP50
- git报错： LF will be replaced by CRLF
- 【一篇文章搞懂】dockerfile构建镜像的命令
- 【Java Web开发指南】Spring一些基础问题整理
- 多层感知器（MLP）详解【基于印第安人糖尿病数据】
- Tensorflow【实战Google深度学习框架】用卷积神经网络打造图片识别应用