真实开发场景：最近入职实习，公司开发模块有个简单的需求：前端表单根据下拉选项的类别进行校验 ；并提示不同的校验信息。思考过后发现确实是常用的功能，如录入的账号可绑定邮箱、QQ、手机等不同信息时的校验，这些都需要前端进行动态校验，而不是后端处理
需求分析
- 改变下拉框 选项，前端校验对应的类型是否满足规则
- 需要校验地址类型：IPv4，IPv6 和 域名 （效果图如下）
效果图1
效果图2
实现思路
- 在el-select 下拉框上绑定change 响应事件，在选项内容改变时触发
- 编写change的回调函数，serverAddrChanged(value)，其中参数是下拉框双向绑定的value值
- 将表单校验规则声明为全局属性，通过prop属性 和 value值动态设置校验规则
核心代码
前端下拉框，与规则声明
<el-form :rules="rules1">
<!--.............-->
<el-form-item label="地址类型：" prop="serverAddrType">
<el-select class="wh200" @change="serverAddrChanged" v-model="serverForm.serverAddrType" placeholder="选择地址类型" clearable="" filterable="">
<!-- 此处选项是value 到 name 的一个映射（展现的是name，真实值为value）-->
<el-option v-for="item in serverAddrType_opt" :key="item.codeValue" :label="item.codeName" :value="item.codeValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="IP或域名：" prop="serverIp">
<el-input v-model.trim="serverForm.serverIp" placeholder="请输入IP或域名" ></el-input>
</el-form-item>
</el-form>
<script>
data(){
return{
// ....
rules1: {}
}
}
</script>
类型修改后触发函数
// 地址类型下拉框 改变
serverAddrChanged(value){
//value === codeValue 改变键入规则
this.rules1['serverIp'] = [];
let pt = '';
let msg = '';
if(value === 2570001){
// ipv4
msg = '请输入正确的IPv4地址';
pt = /^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])\.){3}(25[0-5]|2[0-4][0-9]|1[09][0-9]|[1-9][0-9]|[0-9])$/;
}else if(value === 2570002){
msg = '请输入正确的IPv6地址';
pt = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
}else{
msg = '请输入正确的域名';
pt = /^([H|h][T|t][T|t][P|p][S|s]?:\/\/)[^\s]+/;
}
this.rules1['serverIp'].push({required: true, message: msg, pattern: pt, trigger: "blur"});
}
注意事项（坑）
- 每次编辑或添加服务时，前端的校验值需清空（否则会记录上次的错误提示，用户还没操作就爆红）
实现很简单，内置的resetFields() 清空校验信息
this.$nextTick(() => {
this.$refs.serverForm.resetFields();
});
- 由于校验是在下拉框改变时触发事件初始化的，所以在编辑某个服务时默认状态下无校验，也就是说这时前端的校验就失效了，要做的就是在回显数据的同时，依靠当前回显的类型，初始化表单的校验规则
// 下拉正则回显
this.serverAddrChanged(this.serverForm["serverAddrType"]);
网友评论