如何实现Vue和Element多个输入框校验及循环终止（脱离表单的），element样式穿透

前端校验

当脱离UI的校验单独添加时,一般原生的js校验往往是最优选择,但项目如果允许的话,也可以选择UI的延展校验,例如element的sync-validate(这个是英文的,喜欢的可以参考)

分支循环跳出

应用场景: 当有多个if存在,只想执行其中几个就跳出时
这个是多个输入校验时遇到的,解决方法 在外层添加loop,可以直接使用break跳出分支不再继续循环!因为在ifelse中只能使用return,break会直接报出语法错误!

{
                //Loop nesting
                loop:
                
                    if (this.form.beginKZh == null || this.form.beginKZh.length > 3 || this.form.beginKZh.length < 3 || isNaN(this.form.beginKZh)) {
                        this.$modal.alertError("起点桩号公里号(K)不能为空长度为3仅限数字!");
                        this.$refs.inputRef1.focus();
                        break loop;
                    }else if (this.form.beginMZh == null || this.form.beginMZh.length > 3 || this.form.beginMZh.length < 3 || isNaN(this.form.beginMZh)) {
                        this.$modal.msgError("起点桩号米(M)不能为空长度为3仅限数字");
                        this.$refs.inputRef2.focus();
                        break loop;
                    }else if (this.form.endKZh == null || this.form.endKZh.length > 3 || this.form.endKZh.length < 3 || isNaN(this.form.endKZh)) {
                        this.$modal.alertError("终点桩号公里号(K)不能为空长度为3仅限数字");
                        this.$refs.inputRef3.focus();
                        break loop;
                    }else if (this.form.endMZh == null || this.form.endMZH.length > 3 || this.form.endMZh.length < 3 || isNaN(this.form.endMZh)) {
                        this.$modal.msgError("终点桩号米(M)不能为空长度为3仅限数字");
                        this.$refs.inputRef4.focus();
                        return;
                    }
            }

上面是js,下面是element的form表单,代码不完整,因为牵扯字典引入但可以搭起来粘过去直接看部分效果

			<el-form-item class="markNumber">
                    <span slot="label">
                        <font color='red'>*</font>起点桩号
                    </span>
                    <template slot-scope="scope">
                        <el-input clearable v-model="form.beginKZh" placeholder="公里"
                                  onkeyup ='value=value.replace(/[^(\d)]/g)'
                                  @change="checkNum(scope.row)" ref="inputRef1">
                            <template slot="prepend">K</template>
                        </el-input>
                        <el-input clearable v-model="form.beginMZh" placeholder="米"
                                  onkeyup ='value=value.replace(/[^(\d)]/g)' @change="checkNum(scope.row)"
                                  v-on:blur="checkNum(scope.row)"
                                  ref="inputRef2">
                            <template slot="prepend">M</template>
                        </el-input>
                    </template>
                </el-form-item>
                <el-form-item class="markNumber">
                    <span slot="label">
                        <font color='red'>*</font>终点桩号
                    </span>
                    <template slot-scope="scope">
                        <el-input clearable v-model="form.endKZh" placeholder="公里" onkeyup ='value=value.replace(/[^(\d)]/g)'
                                  @change="checkNum(scope.row)" ref="inputRef3" >
                            <template slot="prepend">K</template>
                        </el-input>
                        <el-input clearable v-model="form.endMZh" placeholder="米" onkeyup ='value=value.replace(/[^(\d)]/g)'
                                  @change="checkNum(scope.row)" ref="inputRef4">
                            <template slot="prepend">M</template>
                        </el-input>
                    </template>
                </el-form-item>

原生UI样式修改

这个是上面的form中使用两个input样式修饰,样式会整体错乱,需要做穿透进行样式修改,具体专业的参考JSDEV

{
    .el-input__inner {
        width:127px;
    }
    .el-input-group {
        line-height: normal;
        display: inline-table;
        width: 49%;
        border-collapse: separate;
        border-spacing: 0;
    }
}