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

Question

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

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

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 不是一个实际的函数，因此您需要定义自己的数字检查。：

$(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 : '');
        }
    });
});

onlyNumeric 类正在从 jQuery 插件中使用。

我坚持的是验证方面。我如何设置数字 1、2、3、4、5 是唯一会导致按钮转到另一个网页的数字。我想设置一个变量来对此进行检查。

我解释清楚了吗？！ :s 谢谢。

Answer 4

我的解决方案基于 jQuery 的 AlphaNumeric plugin。该插件允许您执行 numeric() 功能，但还通过允许您进行自定义覆盖以屏蔽某些字符/允许其他字符来扩展它。在您的情况下，假设您希望以下输入字段仅接受数字 1-5（含 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>