为什么typeof或数字检查验证返回false
[英]why typeof or number check validation is returning false
问题描述
Why number validation is not working in following case. 
为什么在以下情况下无法进行数字验证。
I'd tried with checking type of value 我尝试过检查值的类型
if(typeof value!=='number'){}
I'd tried with checking if value is less than 1. The value of variable is 0 by default 我尝试检查值是否小于1。默认情况下，变量的值为0
if(parseInt(value)<1){}
Following snippet is working fine, now I want to add additional requirement, check if user has entered number or not and stop further process alerting number if text has been detected. 以下代码段运行正常，现在我要添加其他要求，检查用户是否输入了号码，如果检测到文本，则停止进一步的处理警报号码。
It is checking null value, working fine with null value, but what is the wrong with typeof and less than 1 . 它正在检查null值，可以使用null值正常工作，但是typeof且less than 1有什么问题。
I'd added the block of code as comment which is not working. 我添加了代码块作为注释，但无法正常工作。
First validation from the comment block is it return false, even we enter number in field. 注释块的第一个验证结果是它返回false，即使我们在字段中输入数字也是如此。
Second validation from the comment block is partially working, but it has to alert message and break the process, but it is giving NaN result. 来自注释块的第二次验证部分起作用，但是它必须警告消息并中断该过程，但会给出NaN结果。
window.onload=function(){ bk_issue(); } function bk_issue(){ document.getElementById('btn_iss').onclick=function(){ if(document.querySelectorAll('input[name="book"]:checked').length===0){ alert('Please check at least one book'); return false; } if(document.querySelectorAll('input[name="std"]:checked').length===0){ alert('Please check at least one student or staff'); return false; } else{ var ttl_qnt = document.querySelector('input[name="book"]:checked').getAttribute('data-id'); var std = document.querySelectorAll('input[name="std"]:checked'); var iss_qnt=0; for (var i=0;i<std.length;i++){ var value = std[i].closest('tr').getElementsByTagName('td')[2].querySelector('.qnt').value; if(value===''){ var std_qnt = 0; alert('Please fill book quantity in checked student field'); return false; } // This validation is not working /* if(typeof value!=='number'){ var std_qnt = 0; alert('Please type number only'); return false; } if(parseInt(value)<1){ var std_qnt = 0; alert('Please type number only'); return false; }*/ else{ var std_qnt = std[i].closest('tr').getElementsByTagName('td')[2].querySelector('.qnt').value; } iss_qnt += parseInt(std_qnt); } alert(iss_qnt); } } }
<html> <head> </head> <body> <table> <tr> <th>Select</th><th>Book</th><th>Qnt</th> </tr> <tr> <td><input type='radio' name='book' value='1' data-id='20' /></td><td>Social Experiment</td><td>20</td> </tr> <tr> <td><input type='radio' name='book' value='1' data-id='12' /></td><td>Evolution of group</td><td>20</td> </tr> </table> <br/> <button id='btn_iss'>Issue</button> <br/> <table> <tr> <th>Select</th><th>Name</th><th>Issued Qnt</th> </tr> <tr> <td><input type='checkbox' value='1' name='std' /></td><td>Rahul</td><td><input type='text' value='' class='qnt'></td> </tr> <tr> <td><input type='checkbox' value='2' name='std' /></td><td>Preeti</td><td><input type='text' value='' class='qnt'></td> </tr> <tr> <td><input type='checkbox' value='3' name='std' /></td><td>Prince</td><td><input type='text' value='' class='qnt'></td> </tr> </table> </body> </html>
2 个解决方案
解决方案1
3 2019-04-10 14:08:11
value will always be a string, the best way to check if the string is convertible to a number is window.isNaN function ( NOT to be confused with Number.isNaN ): value始终是一个字符串，检查字符串是否可转换为数字的最好方法是window.isNaN函数（ 不要与Number.isNaN混淆）：
if(window.isNaN(value)) {
/* act accordingly, the value is not a number */
}
If you wish to convert that value string into a number just use the Number constructor 如果希望将该value字符串转换为数字，请使用Number构造函数
value = Number(value)
解决方案2
2 已采纳 2019-04-10 14:11:23
As stated by @Jaromanda X an inputs value is always a string so you need to convert it to an integer with parseInt and use isNaN() to check if parseInt(value) is not a number: 如@Jaromanda X所述 ，输入值始终是字符串，因此您需要使用parseInt将其转换为整数，并使用isNaN()来检查parseInt(value)是否不是数字：
if(isNaN(parseInt(value))){
var std_qnt = 0;
alert('Please type number only');
return false;
}
window.onload=function(){ bk_issue(); } function bk_issue(){ document.getElementById('btn_iss').onclick=function(){ if(document.querySelectorAll('input[name="book"]:checked').length===0){ alert('Please check at least one book'); return false; } if(document.querySelectorAll('input[name="std"]:checked').length===0){ alert('Please check at least one student or staff'); return false; } else{ var ttl_qnt = document.querySelector('input[name="book"]:checked').getAttribute('data-id'); var std = document.querySelectorAll('input[name="std"]:checked'); var iss_qnt=0; for (var i=0;i<std.length;i++){ var value = std[i].closest('tr').getElementsByTagName('td')[2].querySelector('.qnt').value; if(value===''){ var std_qnt = 0; alert('Please fill book quantity in checked student field'); return false; } if(isNaN(parseInt(value))){ var std_qnt = 0; alert('Please type number only'); return false; } else{ var std_qnt = std[i].closest('tr').getElementsByTagName('td')[2].querySelector('.qnt').value; } iss_qnt += parseInt(std_qnt); } alert(iss_qnt); } } }
<html> <head> </head> <body> <table> <tr> <th>Select</th><th>Book</th><th>Qnt</th> </tr> <tr> <td><input type='radio' name='book' value='1' data-id='20' /></td><td>Social Experiment</td><td>20</td> </tr> <tr> <td><input type='radio' name='book' value='1' data-id='12' /></td><td>Evolution of group</td><td>20</td> </tr> </table> <br/> <button id='btn_iss'>Issue</button> <br/> <table> <tr> <th>Select</th><th>Name</th><th>Issued Qnt</th> </tr> <tr> <td><input type='checkbox' value='1' name='std' /></td><td>Rahul</td><td><input type='text' value='' class='qnt'></td> </tr> <tr> <td><input type='checkbox' value='2' name='std' /></td><td>Preeti</td><td><input type='text' value='' class='qnt'></td> </tr> <tr> <td><input type='checkbox' value='3' name='std' /></td><td>Prince</td><td><input type='text' value='' class='qnt'></td> </tr> </table> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.