当input的type为number时,有required的属性:
<input type=”number” class=”aa” />
在type为number的情况下,如果输入e或者为空,利用$(“.aa”).val()获取的值都为空,这时提示无法分开,但需求要求“输入格式不正确”或“不能为空”的提示需分开,这时不能借助单纯通过validationMessage属性为true或false来判断了,因为validationMessage都有值,输入e时值为“请输入一个数字”,不输入时其值为“请填写此字段”,都为true,但可以通过其具体的属性值对应判断;或者借助于$('.user-define-money')[0].validity.badInput属性进行判断,当输入为e结尾时,其$('.user-define-money')[0].validity.badInput的值为true,这时应提示“格式不正确”;当不输入时,其$('.user-define-money')[0].validity.badInput的值为false,这时应提示“不能为空”;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="format-detection" content="telephone=no"> <script src="jquery-3.2.1.js"></script> </head> <body> <div> <input type="number" placeholder="自定义" class="user-define-money" required /> </div> <button class="btn-test">test</button> <script> $(".btn-test").on('click',function(e){ console.log($('.user-define-money').val()) console.log($('.user-define-money')[0].value); var userValue =$('.user-define-money').val(); alert(userValue); if(userValue ==""){ if($('.user-define-money')[0].validity.badInput){ alert("格式不正确"); $('.user-define-money').val(""); return ; }else{ alert("不能为空"); $('.user-define-money').val(""); return ; } } if(/^d+(.)?$/.test(userValue)){ userValue = userValue.split(".")[0]; } if(/^0d+?/.test(userValue)){ alert("格式不正确"); $('.user-define-money').val(""); return ; } if(userValue==''||userValue==undefined){ alert("不能为空"); return; }else if(isNaN(userValue)||userValue==0){ alert("格式不正确"); $('.user-define-money').val(""); return ; } else if(checkUserDefined(userValue)){ money = userValue; }else{ alert("格式不正确"); $('.user-define-money').val(""); return ; } }) function checkUserDefined(value){ if(!isNaN(value) && /^d+(.d{1,2}|.)?$/.test(value)){ //这里的判断是控制非数字和小数点最多两位的 if(value.indexOf(".")==-1 && value.length<9){ //这里的判断是输入没有小数点且长度最大为8,符合条件 return true; }else if(value.indexOf(".")!==-1 && value.length<=9){ //这里的判断是输入有小数点且长度最大为8,符合条件 return true; }else{ //剩下的就是不符合条件 return false; } }else{ //这里也是不符合条件 return false; } } </script> </body> </html>
Ps:解决了input的type为number时输入e和不输入的两种分开提示;但仍存在部分手机可以输入汉字或者其他非法字符的情况。
ps:有人知道怎么解决上述情况的,还望指教啊,谢谢呢