Question

我正在使用jQuery进行一些简单的验证，以检查是否所有文本框都已填满。这里是代码：

    $(document).ready(function () {
    $("#<%= btnInsertCountry.ClientID %>").click(function () {
        var codeValue = $("#<%= txtCountryCode.ClientID %>").val();
        var nameValue = $("#<%= txtCountryName.ClientID %>").val();

        if (codeValue == "" || nameValue == "") {
            if (codeValue == "") {
                $("#divCodeValidation").show();
            }
            else {
                $("#divCodeValidation").hide();
            }

            if (nameValue == "") {
                $("#divNameValidation").show();
            }
            else {
                $("#divNameValidation").hide();
            }

            return;
        }
    });
});

div的属性显示为none，并包含错误消息。这段代码有效，但我不喜欢它，因为我使用if来检查值是否为空，而且我有一个if foreach变量。

有更好的方法进行此验证吗？

谢谢

Answer 1

您可以使用HTML5功能进行常见验证 e.g。

<form id='form' action='/html5' method='post'>
<input type='text' required>
<input type='email' required>
<input type='submit'>
</form>

Answer 2

这对验证非常有用。这个jQuery代码循环遍历所有文本框并检查它们的值。如果value为空，则会添加红色边框，以便让用户知道此字段是必需的。

 $(document).ready(function() {

 $('#btnSubmit').click(function(e) {

   var isValid = true;

   $('input[type="text"]').each(function() {

        if ($.trim($(this).val()) == '') {

            isValid = false;

            $(this).css({

                "border": "1px solid red",

                "background": "#FFCECE"

           });
       }

       else {

            $(this).css({

                "border": "",

                "background": ""

            });
       }

    });

    if (isValid == false) 

       e.preventDefault();

    else
        alert('Thank you for submitting');

});

});

文本框代码：

<table>
<tr>
<td>First Name:
</td>
<td><input type='text' id='txtFName'/ >
</td>
</tr>
<tr>
<td>Last Name:
</td>
<td><input type='text' id='txtLName'/ >
</td>
</tr>
<tr>
<td>Age:
</td>
<td><input type='text' id='txtAge'/ >
</td>
</tr>
<tr>
<td>Email:
</td>
<td><input type='text' id='txtEmail'/ >
</td>
</tr>
<tr>
<td colspan="2" style='text-align:center;'><input type="button"     
id="btnSubmit" value=" Submit ">
</td>
</tr>
</table>

CSS代码：

 body
 {
  padding: 10px;
  font-family:Calibri;
  font-size:12pt;
}

td
{
padding:5px;
}
input
{
font-family:Calibri;
font-size:12pt;
}

span
{
font-family:Calibri;
font-size:9pt;
color:red;
}

重写这个jQuery验证

2 个答案: