element UI form校验规则和输入限制

您所在的位置：网站首页 › excel只能输入是或否的限制 › element UI form校验规则和输入限制

element UI form校验规则和输入限制

2023-11-18 07:20| 来源: 网络整理| 查看: 265

工作中经常遇到很多的form表单，这些表单会对input框做一些输入限制，这个案例是element UI引入的el-form，限制输入数字，长度，数字大小等。

1.展示效果

1.1 CPU行大小超出范围提醒，内存行输入不是数字提醒，硬盘行符合规则。在这里插入图片描述 1.2 点击确认提交数据时，控制台会输出黄色警告，提示不满足条件

2.实现 2.1 el-form的引入和绑定数据确定 2.2.js部分 data中的数据绑定，规则定义，规则绑定 export default{ data（）{ //定义规则NumberPattern，限制输入0-100的整数，将在cfg_rules中引用 const NumberPattern = new RegExp(/^([1-9]?\d|100)$/); return { auto_alarm_cfg: { //数据绑定 cpu: null, memory: null, storge: null, }, cfg_rules: { //规则绑定 cpu: [ { required: !0, message: "不能为空" }, { type: "number", message: "必须为数字", trigger: "blur" }, { pattern: NumberPattern, message: "0-100之间的整数", trigger: "blur", }, ], memory: [ { required: !0, message: "不能为空" }, { type: "number", message: "必须为数字", trigger: "change" }, { pattern: NumberPattern, message: "0-100之间的整数", trigger: "blur", }, ], storge: [ { required: !0, message: "不能为空" }, { type: "number", message: "必须为数字", trigger: "change" }, { pattern: NumberPattern, message: "0-100之间的整数", trigger: "blur", }, ], }, } } } 3.注意点 3.1 表格数据绑定时，如果验证的是数字，最好使用修饰符，防止用户输入数字，但是默认为字符串，然后提交表格时，会报错输入的不是数字。 3.2 每一个Input框的验证，对应了一个数组，这个数组可以有多个对象，也就是说可以同时设置多个规则 3.3 :rules绑定规则，prop绑定了rules对应哪个input框（即v-model属性和prop名称必须一致，v-model的CPU对应rules中的CPU）补充： 1.绑定oninput，直接限制输入内容

举例：告警设置上下限

2.绑定键盘事件，限制输入特殊字符

举例：

备注： methods:{ btKeyUp(e) { e.target.value = e.target.value.replace( /[`~!@#$%^&*()_\-+=?:"{}|,.\/;‘\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, ""); }, } 3.点击按钮才验证，blur不验证

需求：必填项为空，失去焦点，也不提示，表单也不能标红，失去焦点只能校验其他规则，比如邮箱格式，手机号格式等，当点击提交或确定按钮，所有为空的表单给出提示，且标红。实现的方法是三目绑定validate-event。

确定 export default{ data(){ return :{ netFormRules: { name: [{ required: !0, message: "网络名称不能为空" }], net_type: [{ required: !0, message: "网络类型不能为空" },trigger: 'blur'], }, } } } 备注：在需求的input框绑定validate-event，若为选择框，还需要把校验的触发事件设置为blur

【本文地址】

element UI form校验规则和输入限制

element UI form校验规则和输入限制

今日新闻

推荐新闻