显示验证消息

$(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>

我对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. 进行验证的最佳方式是什么?客户端vs服务器端?
2. 也，它是更好地显示弹出验证消息或突出显示嵌入在网页上的消息?

:

1. 没有vs 。要么是服务器端，要么是客户端和服务器端都有。这是因为您不能依赖于用户启用JavaScript，因此您不能依赖于客户端来运行。可以把客户端想象成一个预过滤器。客户端的目的是进行"预检查"，防止不需要的数据耗尽带宽(发送到服务器和"坏数据"响应)，并防止在服务器上使用处理周期。客户端也将比服务器端响应更快(因为没有请求-响应)，但这实际上只是高延迟连接的感知性能问题。服务器端将始终运行，因此验证应该始终在服务器端开始。

2. 这是用户的偏好问题。就我个人而言，除非有人非常友好地要求我这样做，否则我不会编写弹出窗口，主要是因为它会分散表单的注意力，并且需要额外的工作(通常是一次点击)来关闭。高亮显示的消息不需要做这两件事，一些验证例程甚至可以很好地将重点放在第一个无效字段上。如果页面上有足够的空间，那么在每个字段旁边加上一条消息就很方便，看起来也很漂亮。但是，如果页面上的空间非常有限，那么大多数验证例程将在该字段旁边放一个星号，并将所有单独的验证消息放在页面的一个位置上。

在你的表之后，你可以保留一个不写任何东西的div。但是有一个id。

验证后，只需通过document.get('div_id')访问该div，然后为其赋值。

使用这个，你甚至可以用红色和其他颜色来显示验证。这样的显示比弹出式要好，因为当软件出现时，点击次数应该是最少的。

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

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

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

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

如果您已经在使用jQuery，您可能能够获得使用jQuery验证插件的批准，因为无论何时您开始一个新项目，它都是微软MVC应用程序的标准配置。话虽如此，我确实意识到让插件获得批准有多难，因为我支持不同的政府客户。看起来您可以为每个输入元素添加一个标记，然后修改span的类以显示和隐藏它，就像您在突出显示输入框时所做的那样。

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

$(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>