显示验证消息

Question

我很努力在我的网页上显示验证消息。 我有一个JavaScript函数，它执行客户端验证，并突出显示无效值的字段。除了突出显示这些字段外，我还想在我的网页上显示一条我不知道该怎么做的消息。

这里是我的javascript函数：

$(function() { 

    $("#Save").click(Validate); 

}); 

function Validate() { 

var invalidValues = []; 
var validValues = []; 
var Code = $("#Code").val(); 
var Description = $("#Description").val(); 
var Status = $("#Status ").val();  

var requiredFields = { '#Code' : Code, 
         '#Description' : Description, 
         '#Status ' : Status }; 

    $.each(requiredFields, function (key, value) { 
     if (value.length == 0) { 
      invalidValues.push(key); 
     } 
     else { validValues.push(key); } 
    }); 

     var invalidFields = invalidValues.toString(); 
     var validFields = validValues.toString(); 

    if (invalidValues.length > 0){ 
     $(invalidFields).addClass("highlighted"); 
     $(validFields).removeClass("highlighted");  
     return false; 
    } 
    $(validFields).removeClass("highlighted"); 
} 

这里是我的网页：

<div> 
    <table> 
    <tr> 
     <th> 
      Code 
     </th> 
     <td> 
      <input maxlength="4" id="Code" type="text"/> 
     </td> 
    </tr> 
     <tr> 
     <th> 
      Description 
     </th> 
     <td> 
      <input id="Description" type="text"/> 
     </td> 
    </tr> 
     <tr> 
     <th> 
      Status 
     </th> 
     <td> 
      <input id="Status" type="text"/> 
     </td> 
    </tr>  
    <tr> 
     <th> 
    </th>  
     <td> 
      <button id="Save" type="button">Save</button> 
     </td>   
    </tr> 
    </table> 
</div> 

我想在我的网页上说：“请为输入有效值的底部显示一个消息：代码”。我将无效值存储在我的js函数“Validate”中的变量“invalidValues”中如何在我的网页中访问这些值？

我还有几个问题，关于什么是做验证的最好方法？客户端与服务器端？另外，显示弹出式验证消息或嵌入在网页上的突出显示的消息是否更好？

Answer 1

我不够熟悉MVC回答关于如何使用内置的验证（像普通的ASP.Net一样），假设MVC有它开始。

这一点声明的方式进行，下面的代码应该验证您的形式必填字段，扔在页面上留言为您的用户：

$(function() { 
    var Validate = function Validate(e) { 
     var allFieldsValid = false, // boolean flag to cache result 
      invalidFields = [],  // array for selectors 
      validFields = [],  // array for selectors 
      requiredFields = [  // array of selectors to validate against 
       "#Code", 
       "#Description", 
       "#Status" 
      ], 
      message = $('<span />').addClass('validation-message').text('* This is a required field.'); 
     $(requiredFields.join(', ')).each(function (i, elem) { 
      //requiredFields.join(', ') should return "#Code, #Description, #Status" 
      var field = $(elem) 
       value = field.val(); 
      if (value.length === 0) { 
       invalidFields.push(field.selector); 
      } else { 
       validFields.push(field.selector); 
      } 
     }); 
     allFieldsValid = invalidFields.length === 0;   // if there are no invalid fields, all fields must be valid 
     $('span.validation-message').remove();     // remove any previous validation messages 
     $(validFields.join(', ')).removeClass("highlighted"); // remove class from all valid fields 
     // add class to all invalid fields and append message 
     $(invalidFields.join(', ')).addClass("highlighted").append(message.clone()); 
     if (!allFieldsValid) { 
      e.preventDefault(); // invalid fields, prevent event from bubbling 
     } 
     return allFieldsValid; // return result 
    }; 
    $("#Save").click(Validate); 
}); 

至于你有关验证其他问题：

1. 做验证的最好方法是什么？客户端与服务器端？
2. 此外，显示弹出式验证讯息或嵌入网页的突出显示的讯息会更好吗？

为了：

1. 没有与。既有服务器端，也有客户端和服务器端。这是因为你不能依靠你的用户启用JavaScript，因此你不能依靠你的客户端来运行。像预过滤器一样考虑客户端。客户端的目的是做一个“预先检查”，并防止不需要的数据占用带宽（发送到服务器和“坏数据”响应）以及使用服务器上的处理周期。客户端也会比服务器端更具响应能力（因为没有请求响应），但这只是高延迟连接的一个可感知的性能问题。 服务器端将始终运行，因此验证应始终在服务器上启动。

2. 这是您的用户偏好问题。就个人而言，除非有人非常好地问我这样做，否则我不会编码弹出窗口，主要是因为它将注意力从表格中移开，并需要额外的工作（通常是一次点击）才能解雇。突出显示的消息不必执行其中任何一项，并且一些验证例程甚至足以将焦点放在第一个无效字段上。如果页面上有空间，每个字段旁边的消息都很方便，并且看起来非常漂亮。但是，如果页面上的空间非常重要，大多数验证例程会在该字段旁边放置一个星号，并将所有单独的验证消息放在页面上的一个点上。

Answer 2

只需在HTML中为您的错误消息添加占位符。例如：

<td> 
     <input id="Description" type="text"/><span id="descriptionErrorPlaceholder" /> 
    </td> 

然后在您的javascript中，使用jQuery或常规javascript添加您的警告消息。

$("#descriptionErrorPlaceholder").text("Warning message"); 

Answer 3

在你的表格之后你可以保留一个没有写入任何东西的div。但带有一个ID。

并且在您通过document.get（'div_id'）确认访问该div后，然后为其赋值。

使用这个，你甚至可以用红色和其他颜色显示验证。 而这样的显示比弹出式显示更好，因为当softaware出现时，cliks的数量应该最小。

Answer 4

如果您已经在使用jQuery，那么您可能能够获得用户对jQuery Validation插件的认可，因为无论何时您开始一个新项目，它现在都会标配Microsoft MVC应用程序。话虽如此，我承认获得批准的插件有多难，因为我支持不同的政府客户。看起来您可以为每个输入元素添加一个标签，然后修改该跨度的类以显示和隐藏它，类似于突出显示输入框时已经完成的操作。

我不能我的工作机器上测试，但我认为这是这样的：

$(function() { 

    $("#Save").click(Validate); 

}); 

function Validate() { 

var invalidValues = []; 
var validValues = []; 
var Code = $("#Code").val(); 
var Description = $("#Description").val(); 
var Status = $("#Status ").val();  

var requiredFields = { '#Code' : Code, 
         '#Description' : Description, 
         '#Status ' : Status }; 

    $.each(requiredFields, function (key, value) { 
     if (value.length == 0) { 
      invalidValues.push(key); 
     } 
     else { validValues.push(key); } 
    }); 

     var invalidFields = invalidValues.toString(); 
     var validFields = validValues.toString(); 

    if (invalidValues.length > 0){ 
     $(invalidFields).addClass("highlighted"); 
     $(validFields).removeClass("highlighted"); 

     $(invalidFields + "Validator").addClass("showValidation"); 
     $(invalidFields + "Validator").removeClass("hideValidation"); 
     return false; 
    } 
    $(validFields).removeClass("highlighted"); 
    $(validFields + "Validator").removeClass("showValidation"); 
    $(invalidFields + "Validator").addClass("hideValidation"); 
} 

随着HTML

<div> 
    <table> 
    <tr> 
     <th> 
      Code 
     </th> 
     <td> 
      <input maxlength="4" id="Code" type="text"/><span id="CodeValidator" class="hideValidation" /> 
     </td> 
    </tr> 
     <tr> 
     <th> 
      Description 
     </th> 
     <td> 
      <input id="Description" type="text"/><span id="DescriptionValidator" class="hideValidation" /> 
     </td> 
    </tr> 
     <tr> 
     <th> 
      Status 
     </th> 
     <td> 
      <input id="Status" type="text"/><span id="StatusValidator" class="hideValidation" /> 
     </td> 
    </tr>  
    <tr> 
     <th> 
    </th>  
     <td> 
      <button id="Save" type="button">Save</button> 
     </td>   
    </tr> 
    </table> 
</div>