好资源导航 » 文章资讯 » element vue validate验证名称重复输入框与后台重复验证特殊字符字符长度及注意事项小结【实例代码】

element vue validate验证名称重复输入框与后台重复验证特殊字符字符长度及注意事项小结【实例代码】

2023-09-05 13:31:07 55

具体代码如下所示：





Title











提交

下面看下vue-element输入框验证

1.控制输入位数

限制输入为10位，这种方式可以使输入框中输入10位后不能输入后续内容

因为number输入框自动将最后一位小数点忽略不计，因此“.”,"2.","3.3."这三种情况均为正确的输入




rules:{
channelName:[
{required:true,message:'渠道名称不能为空',trigger:'change'},
],
}

2.控制小数输入位数

input设置类型为number,step控制步长，正则表达式匹配输入的格式必须为xxx.xxx.

注意，此种方法无法区分不输入的情况，故将提示信息合并为一个。

统一触发方式为change




//js
letcheckPrice=(rule,value,callback)=>{
if(value){
letrgx=/^\d+(\.\d{1,3})?$/;
if(value.match(rgx)==null){
returncallback(newError('请检查输入格式，不能为空，且最多三位小数'))
}else{
callback();
}
}
};
rules:{
price:[
{required:true,message:'请检查输入格式，不能为空，且最多三位小数',trigger:'change'},
{validator:checkPrice,trigger:'change'}
]
},

3.验证时间控件选择的时间是否在某个范围

letcheckSendTime=(rule,value,callback)=>{
lethour=value?value.getHours():0;
if(value!==""){
if(hour<8||hour>21){
returncallback(newError('请选择8:00~22:00之间发送'));
}else{
callback();
}
}
};
sendTime:[
{type:'date',required:true,message:'发送时间不能为空',trigger:'blur'},
{validator:checkSendTime,trigger:'blur'}
]

总结

以上所述是小编给大家介绍的elementvuevalidate验证名称重复输入框与后台重复验证特殊字符字符长度及注意事项小结【实例代码】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】

热门推荐

随机推荐

element vue validate验证名称重复输入框与后台重复验证特殊字符字符长度及注意事项小结【实例代码】