vee-validate校验demo

2018/07/10 17:35
阅读数 16

 

    //太长了,把异步校验放到前面吧;

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>

  

展开阅读全文
red
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部