Question

我有一个我想要创建的表单，用户每个文本框输入一个数字。当用户点击按钮时，我需要所有这些数字都是正确的 - 想象一下iPhone Passcode锁定功能。

理想情况下，我希望按钮只有在所有数字都正确时才可点击（可能是我定义的变量） - 否则它不会执行操作。

HTML -

<form id="journey">
  <input name="code1" type="text" class="code onlyNumeric"  maxlength="1" />
  <input name="code2" type="text" class="code onlyNumeric"  maxlength="1" />
  <input name="code3" type="text" class="code onlyNumeric"  maxlength="1" />
  <input name="code4" type="text" class="code onlyNumeric"  maxlength="1" />
  <input name="code5" type="text" class="code onlyNumeric"  maxlength="1" />

  <input type="button" class="button" value="Next location" />
</form>

目前我看到我是否可以在jQuery / Javascript中使用它，但我不确定如何解决这个问题。

我真的很感激这方面的一些帮助。谢谢。

Answer 1

你可以这样做。请注意，这未经过测试，但逻辑应该有意义。 isNumeric不是实际的函数btw，因此您需要定义自己的数字检查。：

$(function() {
$("#journey input").keyup(function() {
    // Fetch all the fields and test that they are all numeric.
    var $code_fields = $("#journey input[class='onlyNumeric']");
    var all_numeric = true;

    $code_fields.each(function(i, el) {
       if (!isNumeric($(el).val())) {
        all_numeric = false;
       }
    });

    // You will need to give your Next Location button some kind of id.
    if (all_numeric == true) {
        $("#next_location_btn").attr("disabled", "false");
    }
});
});

此外，在页面加载时将“下一个位置”按钮设置为禁用。您可能希望通过JS设置，但用户没有启用Javascript，因此您可以很好地退回。

Answer 2

   $(".onlyNumeric").keydown(
        function(event){
            // get the ASCII value for the key that was pressed
            if(event.keyCode < 48 || event.keyCode > 57){
                return false; // don't add the value to the input because it's not 0-9
            }
        }
    );

那应该让你在那里的大部分路上。祝你好运！

Answer 3

这确实有帮助。我没想到要在页面加载时禁用该按钮。

为了帮助进一步解释，我编写了代码来检查是否只输入了数字，以及一些悬停效果：

$(document).ready(function() {

<!--Form input-->
$('.onlyNumeric').numeric();

<!--Turn the input box focus on and off-->
    $('input[type="text"]').addClass("idleField");
    $('input[type="text"]').focus(function() {
        $(this).removeClass("idleField").addClass("focusField");
        if (this.value == this.defaultValue){ 
            this.value = '';
        }
        if(this.value != this.defaultValue){
            this.select();
        }
    });
    $('input[type="text"]').blur(function() {
        $(this).removeClass("focusField").addClass("idleField");
        if ($.trim(this.value) == ''){
            this.value = (this.defaultValue ? this.defaultValue : '');
        }
    });
});

从jQuery插件中使用onlyNumeric类。

我所坚持的是验证方面。我如何设置说数字1,2,3,4,5是导致按钮转到另一个网页的唯一数字。我想象设置一个可以对照的变量。

我清楚地解释了自己吗？！：谢谢。

Answer 4

我将我的解决方案基于jQuery的AlphaNumeric plugin。此插件允许您执行numeric（）功能，但也可以通过允许您执行自定义覆盖来屏蔽某些字符/允许其他字符来扩展它。在您的情况下，假设您希望以下输入字段仅接受1-5包含的数字：

<form id="journey">
  <input name="code1" type="text" class="code onlyNumeric"  maxlength="1" />
  <input name="code2" type="text" class="code onlyNumeric"  maxlength="1" />
  <input name="code3" type="text" class="code onlyNumeric"  maxlength="1" />
  <input name="code4" type="text" class="code onlyNumeric"  maxlength="1" />
  <input name="code5" type="text" class="code onlyNumeric"  maxlength="1" />

  <input type="button" class="button" value="Next location" />
</form>

使用上述插件的相应jQuery代码如下所示：

$('#journey input.onlyNumeric').numeric({ichars:'67890'});

简单地说：这使得该字段中的字符6,7,8,9和0无效。此技术还可用于允许其他字符（如浮点值的句点）：

$('#journey input.onlyNumeric').numeric({ichars:'67890', allow:'.'});

可以在插件的网站上找到其他文档。当然，记住不仅要检查Javascript中的有效输入，还要提交提交，因为并非所有用户都可以使用javascript。

祝你好运，先生！

Answer 5

使用范围验证：

头部区域：

  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});;
</script>

<script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    field: {
      required: true,
      range: [13, 23]
    }
  }
});
  });
</script>

身体内容

<form id="myform">
  <label for="field">Required, minium 13, maximum 23: </label>
  <input class="left" id="field" name="field" />
  <br/>
  <input type="submit" value="Validate!" />
</form>

根据自定义集变量验证文本框

5 个答案: