vue注册用户前端验证登录信息格式

<template>
    <div class="registerpage">
        <div class="register-header">
            <div class="logo">
                <div class="img">
                    <img src="../assets/logo.png" />
                    <label>注册用户登录验证</label>
                </div>
            </div>
        </div>
        <div class="register-bg">  
            <div>   
                <el-form label-position="left" :inline="true" :model="ruleForm2" :rules="rules2" ref="ruleForm2"    
                    label-width="100px" class="demo-ruleForm register-container" >
                    <h3 class="title" ref="title">欢迎申请</h3> 
                    <el-form-item prop="nickname"  label="姓名："  >
                        <el-input type="text" v-model="ruleForm2.nickname" auto-complete="off" placeholder="用户名" maxlength="10" ></el-input>
                    </el-form-item>
                    <el-form-item prop="gender" label="姓别："  >
                        <el-select  v-model="ruleForm2.gender"   >
                            <el-option label="男" value="1"  ></el-option>
                            <el-option label="女" value="0"></el-option>
                        </el-select>
                    </el-form-item> 
                    <el-form-item prop="companyname" label="单位名称："  >
                        <el-select  v-model="ruleForm2.companyname" placeholder="请选择单位名称" >
                            <el-option :label="item.name" :value="item.id"  v-for="item in ruleForm2.jobnamelist" :key="item.id" ></el-option> 
                        </el-select>
                    </el-form-item> 
                    <el-form-item prop="telnumber"  label="手机号码："  >
                        <el-input type="text" v-model="ruleForm2.telnumber" auto-complete="off" placeholder="手机号码" ></el-input>
                    </el-form-item> 
                    <el-form-item  prop="companyemail" label="公司邮箱："  >
                        <el-input type="text" v-model="ruleForm2.companyemail" auto-complete="off" placeholder="公司邮箱" ></el-input>
                    </el-form-item>
                    
                    <el-form-item  prop="IDnumber" label="身份证号："  >
                        <el-input type="text" v-model="ruleForm2.IDnumber" auto-complete="off" placeholder="身份证号" ></el-input>
                    </el-form-item> 
                    <el-form-item  prop="userip" label="设备IP："  >
                        <el-input type="text" v-model="ruleForm2.userip" auto-complete="off" placeholder="设备IP" ></el-input>
                    </el-form-item> 
                    <el-form-item  prop="usermac" label="设备MAC："  >
                        <el-input type="text" v-model="ruleForm2.usermac" auto-complete="off" placeholder="设备MAC" ></el-input>
                    </el-form-item>
                    <el-form-item prop="ctype" label="账号类型：" >
                        <el-select  v-model="ruleForm2.ctype"  placeholder="请选择账号类型" >
                            <el-option label="长期账号" value="1"  ></el-option>
                            <el-option label="临时账号" value="0"></el-option>
                        </el-select>
                    </el-form-item> 
                    <div class="demarcationline">
                        <strong>资料上传</strong>
                        <i></i>
                    </div>
                    <el-form-item class="fileupload"   > 
                        <div>
                            <el-button type="primary"  plain  class="btnUpload" @click="clickupload()">上传身份证信息</el-button>    
                            <input type="file" name="" class="btnUploadID"  multiple="multiple" @change="changeuploaID($event)" style="display:none" id="input-file-ID" v-if="clearShow" accept="image/gif, image/jpeg,image/png">
 
                            <label>{ {fileName}}</label>
                        </div>
                          
                    </el-form-item>  

                    <el-alert
                        title='申请审批结果会发送至邮箱，请注意查收'
                        type="warning" :closable="false" style="margin-bottom:10px;"
                        show-icon >
                    </el-alert> 
                    <el-form-item style="width:100%;    text-align: center;">
                        <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit" :loading="logining">申请</el-button> 
                    </el-form-item> 
                    
                </el-form>
            </div> 
         </div>
    </div>
</template>

<script>

export default {
    data () {
        var checkName = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('姓名不能为空'));
            } else {
                //[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]
                const reg1 =  /[`~!@#$%^&*()_\- +=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+/g;
                const reg2 = /^[\u4e00-\u9fa5]{2,10}$/;  
                 if (reg1.test(value)) {
                    return callback(new Error('姓名不能包含特殊符号'));
                } else {
                    // callback();
                    if (reg2.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入2-10个汉字'));
                    }
                } 
                
                
            }
        };
        var checkPhone = (rule, value, callback) => { 
            if (!value) {
              return callback(new Error('手机号不能为空'));
            } else {
              const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/; 
              if (reg.test(value)) {
                callback();
              } else {
                return callback(new Error('手机号格式不正确'));
              }
            }
        };
        var checkCardID = (rule, value, callback) => { 
            if (!value) {
              return callback(new Error('身份证号不能为空'));
            } else {
            //   const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
            const reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/; 
              if (reg.test(value)) {
                callback();
              } else {
                return callback(new Error('身份证号格式不正确'));
              }
            }
        };
        var checkIP = (rule, value, callback) => { 
            if (value) { 
                const reg = /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))$/; 
                if (reg.test(value)) {
                    callback();
                } else {
                    return callback(new Error('IP格式不正确'));
                } 
            }
        }; 
        var checkmac = (rule, value, callback) => { 
            if (value) { 
                const reg = /^([0-9a-fA-F]{2})(([/\s:-][0-9a-fA-F]{2}){5})$/; 
                if (reg.test(value)) {
                    callback();
                } else {
                    return callback(new Error('MAC地址格式不正确'));
                } 
            }
        }; 
        return {
            logining: false,
            ruleForm2: {
                nickname: '',
                gender: '1', 
                political:'',
                telnumber:'',
                companytel:'',
                companyemail:'',
                userrole:'',
                IDnumber:'',
                companyname:'', 
                fileName:'',
                IDlist:[],  
                jobnamelist:[],
                userip:'',
                usermac:'',
                ctype:''
            },
            rules2: {
                nickname: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' }, 
                    { min: 2, max: 10, message: '请输入2-10个汉字', trigger: 'blur' } ,
                    { validator: checkName, trigger: ['blur' ] }
                ],
                gender:[
                    { required: true, message: '请选择性别', trigger: 'blur' }, 
                ],
                ctype:[
                    { required: true, message: '请选择账号类型', trigger: 'blur' }, 
                ],
                companyname:[
                    { required: true, message: '请选择单位名称', trigger: 'blur' }, 
                ],
                telnumber:[
                     { required: true, message: '请输入手机号码', trigger: 'blur' },
                     { validator: checkPhone, trigger: ['blur' ] }
                ],
                companyemail:[
                    { required: true, message: '请输入邮箱', trigger: 'blur' }, 
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur' ] }
                ],
                IDnumber:[
                    { required: true, message: '请输入身份证号', trigger: 'blur' }, 
                    { validator: checkCardID, trigger: ['blur' ] }
                ],
                userip:[
                    { required: true, message: '请输入设备IP', trigger: 'blur' }, 
                    { validator: checkIP, trigger: ['blur' ] }
                ],
                usermac:[
                    { required: true, message: '请输入设备MAC地址', trigger: 'blur' }, 
                    { validator: checkmac, trigger: ['blur' ] }
                ],
            },
            checked: true,
            clearShow:true,
            file:null,
            fileName:'',
            fileNamelist:[],
        };
     
    },
    mounted:function(){
        var that = this;
        this.$ajax({
            method:'post',
            url:'/myuser/getcompanys', 
        })
        .then(data => { 
            var dt = data.data;  
            if(dt.success ){ 
                that.ruleForm2.jobnamelist = dt.infolist; 
            }else{   
            } 
        })
        .catch(data=>{ 
        });
    },
    methods: {  
        clickupload(){
            document.querySelector('.btnUploadID').click();
        },
        changeuploaID(e){ 
 
            this.deviceArray = [];
            let deviceFile = e.target.files;
            let formData = new FormData();
            for(let i=0;i<deviceFile.length;i++){
                this.fileNamelist.push(deviceFile[i].name);
                this.fileName = deviceFile[i].name;
                this.file =  deviceFile[i];
                formData.append('IDFile', deviceFile[i]);
            } 
        },
        handleSubmit(ev) { //提交申请
            var _this = this;  
            let formData = new FormData();
           
            this.$refs.ruleForm2.validate((valid) => { 
                if (valid) { 
                    formData.append('nickname',this.ruleForm2.nickname);
                    formData.append('gender',this.ruleForm2.gender);
                    formData.append('companyname',this.ruleForm2.companyname);
                    formData.append('telnumber',this.ruleForm2.telnumber);
                    formData.append('companyemail',this.ruleForm2.companyemail);
                    formData.append('IDnumber',this.ruleForm2.IDnumber);
                    formData.append('userip',this.ruleForm2.userip);
                    formData.append('usermac',this.ruleForm2.usermac);
                    formData.append('ctype',this.ruleForm2.ctype);
                    if(!_this.file){
                        _this.$message({
                            message:'请上传的身份证信息',
                            type: 'error'
                        });
                        return ;
                    }else{
                        formData.append('IDFile',this.file);
                    }

                    let config = {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }

                    this.$ajax.post('/myuser/register',
                        formData, config
                    ).
                    then((res)=>{  
                        if(res.data.success){
                             _this.$message({
                                message:res.data.msg,
                                type: 'success'
                            });
                            _this.$router.push('/login');
                        } 
                        // this.clearShow = true; 
                    },()=>{
                        // this.clearShow = true; 
                    });
 
                } else { 
                    return false;
                }
            });
        }
    }
}
</script>
 

<style  >
*{
  padding: 0;margin: 0;
}
html,body{
  height: 100%;
}

.registerpage{
    width: 100%;
    height: 100%;
}
.register-header{
    height: 90px;
}

.register-header .logo {
    height: 100%;
}
.register-header .logo .img {
    padding-left: 30px;
    height: 70px;
    padding-top: 10px; 
    background: #5ab4b5
}
.register-header .logo .img img{
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    margin-top: 10px;
}
.register-header .logo .img label{
    float: left;
    display: inline-block;
    height: 60px;
    line-height: 60px;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
   
}
 
.register-container {
   
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 10px auto;
    width: 1000px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    box-sizing: border-box;
    border: 1px solid #eaeaea;
    /*box-shadow: 0 0 25px #cac6c6;*/
}
.title {
  margin: 0px auto 20px auto;
  text-align: center;
  color: #434847;
  font-size: 30px;

} 
 
.register-container .el-form-item >div{
    width: 190px;
}
 
.demarcationline {
    overflow:hidden;
    height: 50px;
}
.demarcationline strong{
    float: left;
    display: inline-block;
}
.demarcationline i{
    float: right;
    display: inline-block;
    width: 840px;
    height:1px ;
    border-top:1px dashed  #e7e9f1;
    margin-top: 11px;
}
.fileupload > div{
    width: 100% !important;
}
.fileupload > div button{
    display: inline-block;
}

</style>