其实,开发一个自定义input,难度上还好,但是比较繁琐。因为input有很多状态。
首先明确一下需求:
需求是 我用这个自定义输入框 当我配置他的输入类型是什么(比如邮箱)之后 我输入文字 它会用邮箱的校验规则 校验我输入的内容是否合法 如果不合法 就提示我自定义的错误文本
首先我们比较element-ui的el-input,看看组件结构是什么样的。
生成我自己的:
这里有几个要点
1.样式上面(可以配置宽度、还有背景颜色),这两个类型的类怎么绑定到input上面
getClass() {
let ctx = this;
// 通过一个数组变量实现动态绑定多个类
let inputClass = [];
if (ctx.inputWidth) {
switch (ctx.inputWidth) {
case "narrow":
inputClass.push("input-narrow");
break;
case "middle":
inputClass.push("input-middle");
break;
case "wide":
inputClass.push("input-wide");
break;
}
}
if (ctx.inputShowStyle) {
switch (ctx.inputShowStyle) {
case "normal":
inputClass.push("input-normal");
break;
case "warning":
inputClass.push("input-warning");
break;
case "alarm":
inputClass.push("input-alarm");
break;
}
}
if (!ctx.checkStatus) {
inputClass.push("check-error");
}
return inputClass;
}
2.校验部分
什么事件触发校验?
@input
校验的规则是组件内部,还是开发人员(开发者用户)定义的,写在哪里,怎么用?
这里我们试着用mvc的思维来捋一捋这个思路,
视图:添加红色外边框,出现红色提示错误文字;
数据:
用户录入数据:新增的校验规则 对应的错误提示;新增输入类型;
业务数据:组件内置的 默认有的校验规则,默认错误提示;用户输入内容;默认输入类型;
校验的规则、方法:(逻辑是:遍历所有的可用校验模型。
如果报错了,停止遍历,得到错误信息
如果遍历完了也没报错,错误信息置空
)
let baseRules = [
{
label: "常规用户名以及密码",
type: "",
message: "请输入6-20位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种",
val: /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/
},
{
label: "密码强度的校验",
message: "密码强度不足,最好有三种以上类型组成",
type: "",
val: /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}/
}
];
for (let i = 0; i < baseRules.length; i++) {
debugger;
baseStatus = baseRules[i].val.test(this.inputContent);
if (!baseStatus) {
this.checkError = baseRules[i].message;
break;
}
}
if (baseStatus) {
this.checkError = "";
}
至此校验模型就可以大致完成了。
然后还有区分不同组件的校验,和用户输入的校验的合并。
遍历取值和终止遍历。
再了解正则规则的用法,就可以实现需求了。
input自定义组件要求:
1.可以配置type disabled placeholder pattern size step required等多个属性
2.配置type之后,输入框前面的文字同步修改
3.实现左边为input样式 右边为控制盘的这种模式