Javascript 使用JQuery控制文本框的范围
使用JQuery，我试图创建一些文本框，这些文本框只允许数值，不允许重复的数字，不允许空白，只允许范围内的数字。我使用的范围是从1到999。这是到目前为止我的代码。我有数字值和重复的数字部分工作，但我不知道如何防止空文本框或保持范围从1到999的每个文本框。范围部分似乎不起作用，我还不知道如何提示用户空文本框。我认为有一种方法可以使用HTML5来控制范围，但如果用户不在范围内，该方法不会提示用户。你有什么建议吗Javascript 使用JQuery控制文本框的范围,javascript,jquery,jquery-plugins,jquery-events,Javascript,Jquery,Jquery Plugins,Jquery Events,使用JQuery，我试图创建一些文本框，这些文本框只允许数值，不允许重复的数字，不允许空白，只允许范围内的数字。我使用的范围是从1到999。这是到目前为止我的代码。我有数字值和重复的数字部分工作，但我不知道如何防止空文本框或保持范围从1到999的每个文本框。范围部分似乎不起作用，我还不知道如何提示用户空文本框。我认为有一种方法可以使用HTML5来控制范围，但如果用户不在范围内，该方法不会提示用户。你有什么建议吗 <html> <head> <script type=
<html>
<head>
<script type='text/javascript' src='js/jquery.js'></script>
</head>
<form id="form1">
Enter some text: <input type="text" id="field1" />
<br /><br />
Enter some text: <input type="text" id="field2" />
<br /><br />
Enter some text: <input type="text" id="field3" />
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#field1').blur(function() {
if ($(this).val() == $('#field2').val() || $(this).val() == $('#field3').val()) {
$('#field1').stop(false,true).after(' <span style="color:red;" class="error">No duplicate values please!</span>');
$('.error').delay(600).fadeOut();
$(this).val('');
}
});
$('#field2').blur(function() {
if ($(this).val() == $('#field1').val() || $(this).val() == $('#field3').val()) {
$('#field2').stop(false,true).after(' <span style="color:red;" class="error">No duplicate numbers please!</span>');
$('.error').delay(600).fadeOut();
$(this).val('');
}
});
$('#field3').blur(function() {
if ($(this).val() == $('#field1').val() || $(this).val() == $('#field2').val()) {
$('#field3').stop(false,true).after(' <span style="color:red;" class="error">Duplicate values are not allowed!</span>');
$('.error').delay(600).fadeOut();
$(this).val('');
}
});
});
function RangeTextBox(min, max) {
this.min = min;
this.max = max;
this.textboxbody = $("<input type='text'>");
// Check for a valid range
this.textboxbody.keyup(function(event) {
var textboxbody = event.target;
var value = parseInt(textboxbody.value);
var isNotNumeric = !/^[0-9]+$/.test(textboxbody.value);
var isOutsideRange = (value < min) || (value > max);
if (isNotNumeric || isOutsideRange) {
$(textboxbody).addClass('error');
}
else {
$(textboxbody).removeClass('error');
}
});
return this.textboxbody;
}
<!-- To use it in, simple create a new TextBox by calling new RangeTextBox(min, max). For example -->
$(document).ready(function() {
$("textboxbody").append(new RangeTextBox(1, 999));
});
</script>
</html>
输入一些文本：
输入一些文本：
输入一些文本：
$（文档）.ready（函数（）{
$（'#field1'）.blur（函数（）{
if（$（this）.val（）=$（'#field2'）.val（）||$（this）.val（）=$（'#field3'）.val（））{
$（'#field1'）。停止（false，true）。在（'请不要重复值！'）之后；
$（'.error'）.delay（600.fadeOut（）；
$（this.val（“”）；
}
});
$（'#field2'）.blur（函数（）{
if（$（this）.val（）=$（'#field1'）.val（）||$（this）.val（）=$（'#field3'）.val（））{
$（'#field2'）。停止（false，true）。在（'请不要重复数字！'）之后；
$（'.error'）.delay（600.fadeOut（）；
$（this.val（“”）；
}
});
$（'#field3'）.blur（函数（）{
if（$（this）.val（）=$（'#field1'）.val（）||$（this）.val（）=$（'#field2'）.val（））{
$（“#field3”）.stop（false，true）.after（'不允许重复值！'）；
$（'.error'）.delay（600.fadeOut（）；
$（this.val（“”）；
}
});
});
函数范围文本框（最小值、最大值）{
this.min=min；
this.max=max；
this.textboxbody=$（“”）；
//检查有效范围
this.textboxbody.keyup（函数（事件）{
var textboxbody=event.target；
var value=parseInt（textboxbody.value）；
var isNotNumeric=！/^[0-9]+$/.test（textboxbody.value）；
var isOutsideRange=（值<最小值）| |（值>最大值）；
if（非数值型| | isOutsideRange）{
$（textboxbody）.addClass（'error'）；
}
否则{
$（textboxbody）.removeClass（'error'）；
}
});
返回此.textboxbody；
}
$（文档）.ready（函数（）{
$（“textboxbody”）.append（新的RangeTextBox（1999））；
});
我建议您使用jquery验证插件：，并且不能使用$（“textboxbody”）选择任何内容。您应该通过id、名称或其他方式进行选择
$(document).ready(function() {
$("textboxbody").append(RangeTextBox(1, 999));
});