c# - 显示验证消息

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. 这是您的用户的偏好问题。就我个人而言，除非有人很好地要求我这样做，否则我不会编写弹出窗口代码，主要是因为它会将焦点从表单上移开，并且需要额外的工作(通常单击一下)才能关闭。突出显示的消息不必执行上述任何操作，并且某些验证例程甚至足以将焦点放在第一个无效字段上。如果页面上有足够的空间，每个字段旁边的消息会很方便并且看起来非常漂亮。但是，如果页面上的空间非常宝贵，则大多数验证例程都会在字段旁边放置一个星号，并将所有单独的验证消息放在页面上的一个位置。