Question

我想在我的MVC 5应用程序中使用来自Metro CSS 3的表单验证器。

我的代码如下：

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>@WebApplication.Resources.Account.AccountRegisterPageHeader</h4>
    <hr />
    @*@Html.ValidationSummary("", new { @class = "text-danger" })*@
    <div class="form-group">
        @Html.ValidationMessageFor(model => model.FirstName)
        @Html.LabelFor(m => m.FirstName, new {@class = "col-md-2 control-label"})
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.FirstName, new {@class = "form-control"})
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}

Metro css的代码片段如下：

<div class="input-control text">
    <input
        data-validate-func="minlength"
        data-validate-arg="6"
        data-validate-hint="This field must contains min 6 symbols!"
        type="text">
    <span class="input-state-error mif-warning"></span>
    <span class="input-state-success mif-checkmark"></span>
</div>

如何使用 @ Html.LabelFor ， @ Html.ValidationMessageFor（）等？

Answer 1

<form data-role="validator" data-hint-mode="hint" data-hint-easing="easeOutBounce">

            <div class="row cells2 ">
                <div class="cell">

                        <label class="block">Min length control (hint)</label>
                          <div class="input-control text">
                              @Html.TextBoxFor(model => model.Title,new {data_validate_func="minlength",data_validate_arg="30", data_validate_hint="Min length 6 sym !" ,data_validate_hint_position="left"})
                              @*<input type="text" data-validate-func="minlength" data-validate-arg="6" data-validate-hint="Min length 6 sym !" data-validate-hint-position="top">*@
                              <span class="input-state-error mif-warning"></span>
                              <span class="input-state-success mif-checkmark"></span>
                          </div>
                        <div>
                            <input type="submit"/>
                        </div>




                </div>

在MVC中使用Metro CSS 3表单验证

1 个答案: