账号正则

HTML

<!-- 学生弹框 -->
        <modal v-model="stuPop.stuPopShow" :title="stuPop.popTitle" width="420px">
            <div class='form-group'>
                <p>
                    <span class="span60">账号：</span>
                    <input type="text" class='form-control' style="width: 74%;" v-model="stuPop.popUse"
                        placeholder="请输入账号" >
                    <span class="warning" v-show="warning.warningUse">账号格式不对 请重新输入</span>
                </p>
                <p>
                    <span class="span60">姓名：</span>
                    <input type="text" class='form-control' style="width: 74%;" v-model="stuPop.popName"
                        placeholder="请输入姓名">
                </p>
                <p>
                    <span class="span60">学号：</span>
                    <input type="text" class='form-control' style="width: 74%;" v-model="stuPop.popNumber"
                        placeholder="请输入学号">
                        <span class="warning" v-show="warning.warningNum">学号格式不对 请重新输入</span>
                </p>
                <p>
                    <span class="span60">密码：</span>
                    <input type="text" class='form-control' style="width: 74%;" v-model="stuPop.popPasw"
                        placeholder="请输入密码">
                        <span class="warning" v-show="warning.warningPas">密码格式不对 请重新输入</span>
                </p>
                <p>
                    <span class="span60">用户类型：</span>
                    <i-select v-model="stuPop.popType" style="width:74%;">
                        <i-option value="学生" key="1">学生</i-option>
                        <i-option value="校外人员" key="2">校外人员</i-option>
                    </i-select>
                </p>
                <p>
                    <span class="span60">所在班级：</span>
                    <i-select v-model="stuPop.popIsClass" style="width:74%;">
                        <i-option v-for="item in classAllData" :value="item.ClassId" :key="item.ClassId">{{ item.ClassName }}</i-option>
                    </i-select>
                </p>
                <div class="t30">
                    <button type='button' class='btnClass l80' @click='addStudent'>提交</button>
                    <button type='button' class='btnClass l80' @click='cancel'>取消</button>
                </div>
            </div>
        </modal>

data中定义

warning:{//提示
                    warningUse:false,
                    warningNum:false,
                    warningPas:false,
                },

正则封装调用

//正则匹配 只能输入数字和英文字母
//用户名正则，4到16位（字母，数字，下划线，减号）
            regular:function(data){
                var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
                return uPattern.test(data)
           },

调用及判断

//正则匹配
                var warningUse = that.regular(that.stuPop.popUse)
                var warningNum = that.regular(that.stuPop.popNumber)
                var warningPas = that.regular(that.stuPop.popPasw)
                
                if(!warningUse||!warningNum||!warningPas){
                    if(!warningUse){
                        that.warning.warningUse = true
                    }else{
                        that.warning.warningUse = false
                    }
                    if(!warningNum){
                        that.warning.warningNum = true
                    }else{
                        that.warning.warningNum = false
                    }
                    if(!warningPas){
                        that.warning.warningPas = true
                    }else{
                        that.warning.warningPas = false
                    }
                    return
                }