重写这个 jQuery 验证答案

【问题标题】：Re-write this jQuery validation重写这个 jQuery 验证
【发布时间】：2015-06-05 08:06:10
【问题描述】：

我正在使用 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 的属性 display 为 none 并包含错误消息。此代码有效，但我不喜欢它，因为我使用 if 来检查值是否为空，并且在内部我有一个 if foreach 变量。

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

谢谢

【问题讨论】：

我投票决定将此问题作为离题结束，因为它属于codereview，因为提供的代码正在运行。

标签： jquery asp.net validation

【解决方案1】：

您可以使用 HTML5 功能进行常见验证
例如

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

【讨论】：

我喜欢使用标准方法的想法 - 但要注意与旧浏览器的兼容性。

【解决方案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;
}

【讨论】：