Question

我是这种语言的新手。我有能力检查标签刺痛，但我想确保它旁边的输入字段至少有6位数字（如果可能，数字）

$(document).ready(function(){
    $("label:contains('6 digit')") //i get lost here
});

标记：

<form>
    <label>Test</label><input value="1" type="text" class="check">
    <label>Test</label><input value="1" type="text" class="check">
    <label>Test</label><input value="1" type="text" class="check">
    <label>6 digit</label><input value="1" type="text" class="check"> 
    <label>6 digit</label><input value="1" type="text" class="check">
    <label>Test</label><input value="1" type="text" class="check">

    <input type="submit">
</form>

Answer 1

蒂姆博尔顿得到的几乎是正确的，虽然他正在检查价值是否低于5，他没有测试数字位数。我会这样做：

function isValidForm(){
   var labels = $('form labels');
   $(labels).each(function(){
      var inputText = $(this).next();
      if($(inputText).val().length < 6 || isNaN($(inputText).val())) {
         $(inputText).css('color', 'red'); // you can do whatever you want to show the field is not properly filled
         return false;
      }         
   })
   return true;
}

然后，在表单提交时，您所要做的就是：

$('form').submit(function(){
   if(!isValidForm()){
      alert('please fix the errors');
      return false;
   }
});

Answer 2

您需要在for上设置label属性。您还需要为label识别的输入设置ID。那应该用适当的钩子来帮助你做你想做的事情（或至少适当地设置）。

使用您当前的设置，请尝试：

<script>
    $(document).ready(function(){
        $('#submit').click(function(event) {
            event.preventDefault();
            $('label').each(function() {
                var len = $(this).next().length;
                if(len < 5) { 
                    alert('Too Short!');
                } else { $('#form').submit();
            });
        })
    });
</script>
<form id="form">
    <label>Test</label><input value="asdfassd1" type="text" class="check">
    <label>Test</label><input value="1" type="text" class="check">
    <label>Test</label><input value="1" type="text" class="check">
    <label>6 digit</label><input value="1" type="text" class="check"> 
    <label>6 digit</label><input value="1" type="text" class="check">
    <label>Test</label><input value="1" type="text" class="check">
    <input type="submit" id="submit">
</form>

Answer 3

label的目的是通过id与表单相关的元素相关联：

<label for="digits">Enter Digits</label>
<input type="text" id="digits" />

请参阅label的文档。鉴于您的所有input标签都应该id，请尝试以下操作：

$('#inputID').each(function() {
    if (!$(this).val().match(/^\d{6,}$/)) {
        alert('incorrect formatting!');
    }
});

根据正则表达式测试所选输入的值为“所有数字，至少为6”。

jsFiddle demo

我认为regular expressions是验证简单输入的最简洁，最便携的方式。

Answer 4

如果可能，找到一种简单的方法来区分您需要验证的字段，例如Tim Bolton建议的元素上的ID属性，或者可能通过CSS类如下（即“needs6”类）：

<form>
    <label>Test</label><input value="1" type="text" class="check">
    <label>Test</label><input value="1" type="text" class="check">
    <label>Test</label><input value="1" type="text" class="check">
    <label>6 digit</label><input value="1" type="text" class="check needs6"> 
    <label>6 digit</label><input value="1" type="text" class="check needs6">
    <label>Test</label><input value="1" type="text" class="check">
    <input type="submit" />
</form>

然后你的jQuery选择器变得更加简单（即$("input.needs6")）。

选择输入后，有许多方法可以验证它们。就个人而言，我会使用以下方法：

$(document).ready(function() {
    var testFor6 = function () {
        var allHave6 = true;
        $("input.needs6").each(function () {
            var input = $(this);
            var value = input.val();
            if (!value.match(/\d{6}/g)) {
                allHave6 = false;
                input.addClass('doesNotHave6');
            } else {
                input.removeClass('doesNotHave6');
            }
        });

        return allHave6;
    };
    $('input[type="submit"]').click(function (e) {
        var allHave6 = testFor6();
        if (!allHave6) {
            e.preventDefault(); //Cancel event-bubbling.
        }
        return allHave6;        //Prevent form submission when false.
    });
});

如果你想看到它的实际效果，请将其弹出到http://jsfiddle.net/并进行测试，尽管你可能希望将它与一些示例CSS类结合使用以查看它的工作情况。以下样本。

.needs6 {background-color: yellow;}
.doesNotHave6 {background-color: red;}

希望这有帮助，

皮特

附录：

你的意思是空间......

<form>
    <label>Test</label><input value="1" type="text" class="check">
    <label>Test</label><input value="1" type="text" class="check">
    <label>Test</label><input value="1" type="text" class="check">
    <!-- here? --><label><!-- here? -->6 digit</label><!-- here? --><input value="1" type="text" class="check needs6" value="<!-- here? -->"> 
    <label>6 digit</label><input value="1" type="text" class="check needs6">
    <label>Test</label><input value="1" type="text" class="check">
    <input type="submit" />
</form>

请澄清。

当然！

只需将输入循环功能更改为以下任何部分......

$("input.needs6").each(function () {
    var input = $(this);
    var value = input.val();
    //You can use this to trim.
    var trimmedValue = value.replace(/\s\s*$/, '').replace(/^\s\s*/, '');
    //You can use this to find leading whitespace.
    var hasLeadingSpaces = value.match(/^\s\s*/, '');
    //You can use this to find trailing whitespace.
    var hasTrailingSpaces = value.match(/\s\s*$/, '');
    if (hasLeadingSpaces) {
        //Do something
    }
    if (hasTrailingSpaces) {
        //Do something
    }
    //Check original value
    if (!value.match(/\d{6}/g)) {
        allHave6 = false;
        input.addClass('doesNotHave6');
    } else {
        input.removeClass('doesNotHave6');
    }
    //Check trimmed value
    if (!trimmedValue.match(/\d{6}/g)) {
        allHave6 = false;
        input.addClass('doesNotHave6');
    } else {
        input.removeClass('doesNotHave6');
    }
});

检查标签文本并验证与其关联的输入字段至少包含x个字符

4 个答案: