4

mvc3 の検証について質問があります。組み込みの検証は見栄えがします。ただし、あるケースでは JavaScript を使用しなければならなかったため、ルック アンド フィール (アラート ウィンドウと素敵な赤いテキスト) に一貫性がありませんでした。ユーザー入力用のいくつかのフィールドを含むフォームがあります。送信されると、一部の ajax コードは、フォームから送信された値を取得し、クライアント データベースが作成されるプロセスを開始するコントローラー メソッドにマップされるリンクを起動します。問題は、そのフォームのフィールドに直接マップされたモデルがないため、フィールド (長さ、文字など) で検証を行う最良の方法は何ですか? 私の解決策は、いくつかのJavaScript関数を書くことでしたが、それを行うためのよりクリーンな方法はありますか?

 <td>@Html.TextBox("NewClientId")</td>
...            

    <script language="javascript">
       function ValidateFieldLength(min, max, element) {
            var len = element.value.length;
            if (len < min || len > max)
                return false;
            else {
                return true;
            }
        }
        function createNewClient() {
            if (!ValidateFieldLength(3,3,document.getElementById('NewClientId'))) {
            alert("Invalid Client ID length");
            return;
        }
        $.ajax({
            url: '/api/Clients',
            type: 'PUT',
            data: JSON.stringify({
                ClientId: $('#NewClientId').val(),
                Name: $('#NewClientName').val()
            }),
            contentType: 'application/json; charset=utf-8',
            success: function (reponse) {
                //alert(reponse.data.model.Id);
                alert("Database created");
            },
            error: function (err) {
                alert(err);
            }
        });
    }
4

3 に答える 3

14

私が見る他のオプションは、検証データ属性を手動で html 要素に追加することです。このようにして、サーバー側とクライアント側の両方でエラー メッセージやその他のプロパティが重複するのを避けることができます。

たとえば。

@Html.TextBox("NoOfJoinees", "", new 
{ 
   size = 5,  
   data_val_required="No. of joinees is required",
   data_val_number = "The field No. of joinees must be a number.",
   data_val_range = "No. of joinees should be minimum 2 and not more than 10",
   data_val_range_max="10",
   data_val_range_min="2"
})

上記のテキスト ボックスでは、データ属性を追加することで、 required、type、rangeの 3 種類の検証を簡単に追加できます。残りは、Microsoft が提供する目立たない検証ライブラリによって処理されます。

エラー メッセージとその他の定数を 1 か所から読み取る必要があります。したがって、サーバー側で検証を行っているときにそれらを複製する必要はありません。

于 2012-06-15T16:54:50.100 に答える
2

jQuery.validateを使用して、組み込みの検証メソッドのいくつかを使用できます。
jQuery.validate

ただし、自分のやっていることにはやり過ぎかもしれませんが、それでもサーバー側の検証を行う必要があります。

于 2012-06-15T16:06:33.127 に答える
2

検証ルールを設定するためだけにビューモデルを使用し、目立たないjavascriptを使用してフォーム送信をキャッチし、ajax投稿を行うことができます。

ビューモデル

public class YouViewModel
{
    [DisplayName("Client name")]
    [Required()]
    public string NewClientName { get; set; }

    [DisplayName("Client id")]
    [StringLength(3, MinimumLength = 3, ErrorMessage = "{0} must be 3 characters")]
    public string NewClientId { get; set; }
}

コントローラ

public ActionResult YourAction()
{
    return View() //Note that you don't even need to pass a view model to the view
}

意見

@model Namespace.YouViewModel

@using (Html.BeginForm())
{
    <div class="form-body">
        @Html.ValidationSummary()

        <div class="control-group">
            @Html.LabelFor(x => x.NewClientName )
            @Html.TextBoxFor(x => x.NewClientName , new { @class = "span3" })
        </div>

        <div class="control-group">
            @Html.LabelFor(x => x.NewClientId )
            @Html.PasswordFor(x => x.NewClientId , new { @class = "span3" })
        </div>
    </div>
}
于 2012-06-15T16:45:57.850 に答える