Question

我编写了一个允许用户输入个人和付款详细信息的应用程序。

我对大多数字段进行了大量的验证检查，以确保它们不是空白，并希望将来引入其他检查（例如，仅限数字值，无特殊字符）..

我看看我的jQuery代码，看起来我已经用啰嗦的方式解决了这个问题，使用if else's。这是我使用字段示例的jQuery代码：

$(document).ready(function () {

$(".submitForm").click(function () {

    if ($("#Firstname").val() == '') {
        $("#Firstname").addClass("highlight");
    } else {
        $("#Firstname").removeClass("highlight");
    }

    if ($("#Surname").val() == '') {
        $("#Surname").addClass("highlight");
    } else {
        $("#Surname").removeClass("highlight");
    }

    if ($("#email").val() == '') {
        $("#email").addClass("highlight");
    } else {
        $("#email").removeClass("highlight");
    }

    if ($("#confirmemail").val() == '') {
        $("#confirmemail").addClass("highlight");
    } else {
        $("#confirmemail").removeClass("highlight");
    }

    ......
    ......

    $("#PersonalDetailsRequired").removeClass("visuallyhidden ");
    //document.forms[0].submit();
});
});

有没有更有效的方式来写这个？

这是我的jFiddle：http://jsfiddle.net/oampz/G3ccb/5/

此外，即使所有字段都包含值，PersonalDetailsRequired似乎总是会出现。

由于

更新

在这里上传了一个新的小提琴 - http://jsfiddle.net/oampz/P9eKZ/1/

我正在尝试做的是#PersonalDetailsRequired和#AddressDetailsRequired仅显示他们各自的字段是否未填写..

由于

Answer 1

您可以使用each方法：

$('form input').each(function(){
  if($(this).val()==''){
    $(this).addClass('highlight');
  } else {
    $(this).removeClass('highlight');
  }
});

根据您的评论，您可以使用not selector，如下所示：

$(this).not('your_selector_not_to_validate').val()==''

Answer 2

例如，您可以在jquery中使用toggleClass方法，而不是if / else;每个人都要通过以下表单元素：

$('form input.MyCoolSelectoForValidation').each(function(){
    $(this).toggleClass('highlight', ($(this).val()==''));
});

演示：http://jsfiddle.net/G3ccb/7/

UPD：同样可以应用于代码以显示错误信息：

$("#PersonalDetailsRequired").toggleClass('visuallyhidden', $('.highlight').length < 1);

Answer 3

试试这段代码：

<强> DEMO

$(document).ready(function () {
    $(".submitForm").click(function () {
        $("input").each(function(){
            if($(this).val() == '')
            $(this).addClass("highlight");
            else 
            $(this).removeClass("highlight");       
        $("#PersonalDetailsRequired").removeClass("visuallyhidden ");
        //document.forms[0].submit();
        });
    });
});

Answer 4

有效的方法是使用HTML5验证，无需为此添加脚本：

以下是三个实用（但不是全局完美）的例子：

强密码：

输入标题=“至少八个包含至少一个数字，一个较低和一个大写字母的符号”type =“text”pattern =“（？=。 \ d）（？=。 [az]）（？=。* [AZ]）。{8，}“必需

电子邮件地址：

input type =“text”title =“email”required pattern =“[^ @] + @ [^ @] +。[a-zA-Z] {2,6}”

电话号码：

input type =“text”required pattern =“（+？\ d [ - 。] *）{7,13}”title =“国际，国内或本地电话号码”

jQuery减少验证代码中的迭代

4 个答案: