通过 onkeyup 事件 Jquery 验证文本框而不使用警报
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17739736/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text Box validation through onkeyup event Jquery without using alert
提问by Nishanth Lawrence
I have the following text box in my html page .
我的 html 页面中有以下文本框。
The code which I am using so far is .
到目前为止我使用的代码是 .
<input type="text" id = "points" onkeyup="Validate()">
function Validate(){
var text_value = document.getElementById("points").value;
alert(text_value);
if (!text_value.match(/^[56789]$/) && document.getElementById(called_id).value !="")
{
document.getElementById("points").value="";
// document.getElementById("points").focus();
alert("Please Enter only between 5 and 10 ");
}
}
Accepted values are 5 , 6 , 7 , 8 , 9 and 10 . I have found the way based on onkeyup event to accept only 5 , 6 , 7 , 8 and 9 .. I want to know how to include 10 there . Also I want to know the onkeyup event validation for the same using jquery .
可接受的值为 5 、 6 、 7 、 8 、 9 和 10 。我找到了基于 onkeyup 事件的方法，只接受 5、6、7、8 和 9。我想知道如何在那里包含 10。另外我想知道使用 jquery 的 onkeyup 事件验证。
- If the user gives any other value apart from these it should be given to the right of the text box as "The value should be between 5 and 10 " (not as an alert) .
- If the first entered value is 1 , it should wait for the next key pressed . Accept if it is 0 or raise the same error message as in previous case .
- 如果用户提供除这些之外的任何其他值，则应在文本框右侧给出“值应介于 5 和 10 之间”（不是作为警报）。
- 如果第一个输入的值是 1，它应该等待下一个按下的键。如果为 0 则接受，否则会引发与前一种情况相同的错误消息。
回答by Zaheer Ahmed
I would prefer without regex:
我宁愿没有正则表达式：
function validate() {
var num = document.getElementById("points2").value;
var num = parseInt(num, 10);
alert(num);
if (num < 5 || num > 10) {
document.getElementById("points2").value = "";
alert("Please Enter only between 5 and 10 ");
}
}
change your regex to :
将您的正则表达式更改为：
/^([5-9]|10)$/
you should use onchangeevent:
你应该使用onchange事件：
<input type="text" id = "points" onchange="Validate()">
function Validate(){
var text_value = document.getElementById("points").value;
alert(text_value);
if (!text_value.match(/^([5-9]|10)$/) && document.getElementById(called_id).value !="")
{
document.getElementById("points").value="";
// document.getElementById("points").focus();
alert("Please Enter only between 5 and 10 ");
}
}
回答by Shiva Avula
$('#textbox').keyup(function() {
var value = $('#textbox').val();
if(value != ''){
if(!value.match(/^[5678910]$/))
textboxError();
else{
var length = value.length;
if(value.charAt(length-1) == 0 && value.charAt(length-2) != 1)
textboxError();
}
}
};
$('#textbox').change(function() {
var value = $('#textbox').val();
if(value != '')
textboxError();
}
};
function textboxError(){
$('#textbox').val('');
$('#textbox').focus();
alert("Please Enter only between 5 and 10 ");
}
What we are doing is,
我们正在做的是，
- Check if value is empty (If empty don't perform anything)
- If not empty check if the value matches to defined set
- If it match, now we do check for 10. What we do is if last entered item of field is 0, than the previous field must be 1 so it makes a 10. If not we throw error.
- But here is a problem, the user might enter 1 and leave the field without entering another char. So, u can extend this by onchange field.
- Onchange, now we check for count of 1 and that should match count of 10. It fixes our problem. You don't have to worry of 0 because we already check it in keyup block.
- 检查值是否为空（如果为空，则不执行任何操作）
- 如果不为空检查值是否与定义的集合匹配
- 如果匹配，现在我们检查 10。我们所做的是如果最后输入的字段项是 0，那么前一个字段必须是 1，所以它是 10。如果不是，我们抛出错误。
- 但这里有一个问题，用户可能输入 1 并离开该字段而不输入另一个字符。所以，你可以通过 onchange 字段来扩展它。
- Onchange，现在我们检查计数为 1 并且应该匹配计数为 10。它解决了我们的问题。您不必担心 0，因为我们已经在 keyup 块中检查了它。
I Didn't check the code. So if any typos or errors, u can replace them.
我没有检查代码。因此，如果有任何拼写错误或错误，您可以替换它们。
回答by Brady Cartmell
As Zaheer Ahmed stated, /^([5-9]|10)$/will catch 10 as well. For the event listener, you can use
正如 Zaheer Ahmed 所说，他/^([5-9]|10)$/也会抓到 10 个。对于事件侦听器，您可以使用
$('#textbox')[0].addEventListener('input', function(event) {
var value = $(event.target).val();
// we already have a reference to the element through the event object,
// crawling the DOM again is expensive.
if(value != '') textboxError();
});
This bypasses jQuery, which may be frowned upon by some, but the 'input' event fires immediately and also works if the text was pasted in or entered by some other method.
这绕过了某些人可能不赞成的 jQuery，但是 'input' 事件会立即触发，并且如果文本被粘贴或通过其他方法输入，它也会起作用。
