MVC4 Razor中必填字段的选项卡验证

时间:2014-03-06 11:42:00

标签: javascript jquery asp.net-mvc razor

我想在MVC中实现标签验证。我有两个文本框密码和确认密码和确认密码应该与密码相同。现在我已经完成了比较验证并且它完美验证但我只是在获得验证消息时表格正在提交。 我想在选项卡上进行操作意味着在选项卡上输入确认密码后如果它与密码不一样我想要验证消息任何方法我想使用jquery或javascript.Can有人请帮助我这样做。我正在分享我的代码。

查看

     @using (Html.BeginForm("Save", "SaveInfo", FormMethod.Post))
        {
          @Html.ValidationSummary(true)
            <div style="color:red; text-align:center" >
                <fieldset>
                    <legend>Validation Summary</legend>
                    @Html.ValidationMessageFor(m => m.Password)
               <br />
                    @Html.ValidationMessageFor(m=>m.ConfirmPassword)
                </fieldset>
            </div>
            <br />
            <br />
            <div>
              <table border="1" style=  "width:500px">
                  <tr>
                      <td>
                          @Html.LabelFor(m=>m.Password) 
                      </td>
                      <td>
                          @Html.PasswordFor(m => m.Password, new { style="Width:300px"})

                      </td>

                  </tr>
                  <tr>
                      <td>
                          @Html.LabelFor(m=>m.ConfirmPassword)
                      </td>
                      <td>
                          @Html.PasswordFor(m => m.ConfirmPassword, new { style="Width:300px"})
                      </td>

                  </tr>
                 </table>
              <input type="submit" value="Save"  />
          </div>

        }

模型

                          using System;
                using System.Collections.Generic;
                using System.Linq;
                using System.Web;
                using System.Data;
                using System.Data.SqlClient;
                using System.Configuration;
                using System.ComponentModel;
                using System.ComponentModel.DataAnnotations;

                namespace Employee_Mgmt_System.Models
                {
                    public class EmployeeRegistration
                    {

                        [Required(ErrorMessage = "Password Cannot be kept blank")]
                        [DataType(DataType.Password)]
                        [Display(Name = "Password")]
                        public string Password
                        {
                            get;
                            set;
                        }
                        [Required(ErrorMessage = "Confirm Password Cannot be kept blank")]
                        [DataType(DataType.Password)]
                        [Display(Name = "Confirm Password")]
                        [Compare("Password", ErrorMessage = "Password and confirm password is not matching")]
                        public string ConfirmPassword
                        {
                            get;
                            set;
                        }


                    }

                }

2 个答案:

答案 0 :(得分:0)

试一试: -

我使用jquery它可以帮助你。

jQuery('.validatedForm').validate({
    rules : {
        password : {
            minlength : 5
        },
        password_confirm : {
            minlength : 5,
            equalTo : "#password"
        }
    }
});

JSfiddle Example

我认为应该有这样的东西。

答案 1 :(得分:0)

如果您可以使用Jquery keyup事件

,请检查此项
 <tr>
                          <td>
                              @Html.LabelFor(m=>m.Password) 
                          </td>
                          <td>
                              @Html.PasswordFor(m => m.Password, new { style="Width:300px",@id="pwd"})

                          </td>

                      </tr>
                      <tr>
                          <td>
                              @Html.LabelFor(m=>m.ConfirmPassword)
                          </td>
                          <td>


                              @Html.PasswordFor(m => m.ConfirmPassword, new { style="Width:300px",@id="confpwd"})
                          </td>
                  <tr>
                  <td>
                   <label id="msgerror"/>
                          </td>

                    </tr>

$('#pwd,#confpwd').keyup(function(){
if($('#pwd').val()!=$('#confpwd').val())
    $('#msgerror').text('Must match');
    else
        $('#msgerror').text('');

})

FIDDLE