Question

我知道我必须在这里遗漏一些超级简单的东西，因为理论上这段代码应该有效，但它不是，我无法理解为什么。我正在尝试编写自己的jQuery表单验证，因为我尝试了jQuery表单验证器插件，并且设置规则和消息非常简单，弄清楚如何获取错误消息以显示在哪里我希望它是一场噩梦（例如，无法通过单选按钮显示消息。）

我已尝试验证工作的第一部分，但是一旦您在现场输入内容，我就无法清除该消息。此外，即使满足条件，该消息也会弹出，这对我来说没有意义。

这里是jsfiddle

HTML

<form>
        <p>
        <lable for="name">Enter your name:</lable>
        <input type="text" id="name" name="name">
        <span class="error"></span>
        </p>

        <lable for="age">Enter your Age:</lable>
        <input type="text" id="age" name="age" width="3">
        <span class="error"></span>
        </p>
</form>

的jQuery

$("input").focusin(function(){//highlight input field on focus
                $(this).css("background-color", "yellow");
            });
            $("input").focusout(function(){
                $(this).css("background-color", "white");
            });


            $("#name").keyup(function(){ //check against non-letter characters in name field

                var notLetter = /[^A-Za-z]/;

                if (notLetter.test($(this))){
                    $(this).next(".error").text("Letters only please!");
                } else {
                    $(this).next(".error").text("");
                }
            });

            $("#name").focusout(function(){//check that the field isn't empty

                if ($(this).val() == ""){
                    $(this).next(".error").text("You forgot to enter your name!");
                } else  {
                    $(this).next(".error").text("");
                }
            });

            $("#age").keyup(function(){//check against non-number characters in age

                var notNumber = /[^0-9]/;

                if (notNumber.test($(this)) != false){
                    $(this).next(".error").text("Numbers only please!");
                } else {
                    $(this).next(".error").text("");
                }
            });

            $("#age").focusout(function(){//check that the field isn't empty

                if ($(this).val() == ""){
                    $(this).next(".error").text("You forgot to enter your name!");
                } else  {
                    $(this).next(".error").text("");
                }
            });

Answer 1

你忘记了$（this）.val（）

        $("#name").keyup(function(){ //check against non-letter characters in name field

            var notLetter = /[^A-Za-z]/;

            if (notLetter.test($(this).val())){
                $(this).next(".error").text("Letters only please!");
            } else {
                $(this).next(".error").text("");
            }
        });

再次在年龄

        $("#age").keyup(function(){//check against non-number characters in age

            var notNumber = /[^0-9]/;

            if (notNumber.test($(this).val())){
                $(this).next(".error").text("Numbers only please!");
            } else {
                $(this).next(".error").text("");
            }
        });

你也可以删除！= false - 例如

if (test != false)

与

相同

if (test)

继承固定的fiddle

Answer 2

在使用JS验证表单时需要记住一些事情： -

使用(this).val();
如果发生错误，则转发到下一个带有错误的值。
使用if (test != false)或if (test)
然后转发您的Control for success页面

Answer 3

您可以使用lettersonly规则。这是一个例子：

定义变量验证器并执行以下操作：

validator = $("form").validate({
  rules: {
    name: {  required: true,
             lettersonly: true 
           }
    }
});

值得注意的是，每个附加方法都是独立的，您可以包含该特定方法，只需将其放在.validate（）调用之前：

jQuery.validator.addMethod("lettersonly", function(value, element) {
  return this.optional(element) || /^[a-z]+$/i.test(value);
}, "Letters only please");

你需要打电话

$("form").valid()

如果它是有效的意味着没有任何错误，那么：

validator.hideErrors();
$("form" div.has-error").removeClass("has-error");

对于仅用于数字的年龄输入，jQuery已在v1.7中添加了自己的jQuery.isNumeric（）。请参阅：https://stackoverflow.com/a/20186188/66767

尝试使用jQuery验证表单字段

3 个答案: