Jquery 使用MVC在asp.net中验证html输入

Jquery 使用MVC在asp.net中验证html输入,jquery,asp.net-mvc,Jquery,Asp.net Mvc,我是MVC的初学者。我正在尝试创建一个注册表 这是我的看法 <div class="registrationForm"> @using (Html.BeginForm("Registration", "Login", FormMethod.Post, new { enctype = "multipart/form-data" })) { <p> <input t

我是MVC的初学者。我正在尝试创建一个注册表

这是我的看法

 <div class="registrationForm">
          @using (Html.BeginForm("Registration", "Login", FormMethod.Post, new { enctype = "multipart/form-data" }))
          {
              <p>
                  <input type="text" id="firstname" name="firstName" placeholder="First Name" class="radius mini" />
                  <input type="text" id="lastname" name="lastName" placeholder="Last Name" class="radius mini" />
              </p>
              <p>
                  <input type="text" id="email" name="email" placeholder="Your Email" class="radius" />
              </p>
              <p>
                  <input type="text" id="remail" name="remail" placeholder="Re-enter Email" class="radius" />
              </p>
              <p>
                  <input type="password" id="password" name="password" placeholder="New Password" class="radius" />
              </p>
              <p>
                  <button class="radius title" name="signup" type="submit">Sign Up</button>
              </p>
        }
      </div> 

@使用(Html.BeginForm(“注册”、“登录”、FormMethod.Post、新的{enctype=“multipart/formdata”}))
{

注册

}

我想验证视图中的所有输入字段。你能帮帮我吗?提前感谢。

有两种不同的方法来验证一种方法,一种是使用MVC framewrok提供的助手方法,允许在客户端进行验证,另一种是仅在客户端使用jQuery验证,但第一种方法最适合在客户端执行验证服务器端和客户端都可以

使用助手方法

 <div class="registrationForm">
      @using (Html.BeginForm("Registration", "Login", FormMethod.Post, new { enctype = "multipart/form-data" }))
      {
          <p>
             @Html.TextBoxFor(m => m.firstName, new { @class = "form-control" })
             @Html.ValidationMessageFor(m => m.firstName)

             @Html.TextBoxFor(m => m.lastname, new { @class = "form-control" })
             @Html.ValidationMessageFor(m => m.lastname)
          </p>
          <p>

             @Html.TextBoxFor(m => m.email, new { @class = "form-control" })
             @Html.ValidationMessageFor(m => m.email)             
          </p>
          <p>

             @Html.TextBoxFor(m => m.remail, new { @class = "form-control" })
             @Html.ValidationMessageFor(m => m.remail)  

          </p>
          <p>

             @Html.TextBoxFor(m => m.password, new { @class = "form-control" })
             @Html.ValidationMessageFor(m => m.password)  

          </p>
          <p>
          <input class="radius title" name="signup" type="submit" value="Sign Up">
          </p>
    }
  </div> 

 <script src="~/Scripts/jquery.validate.min.js"></script>
public class RegisterViewModel
{
    [Required]
    [Display(Name = "Enter first name")]
    public string firstname{ get; set; }

    [Required]
    [Display(Name = "Enter lastname")]
    public string lastname{ get; set; }

    [Required]
    [Display(Name = "Enter Email")]
    public string email{ get; set; }

    [Required]
    [Display(Name = "Reenter email")]
    public string remail{ get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("password", ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }
}
视图中的

 <div class="registrationForm">
      @using (Html.BeginForm("Registration", "Login", FormMethod.Post, new { enctype = "multipart/form-data" }))
      {
          <p>
             @Html.TextBoxFor(m => m.firstName, new { @class = "form-control" })
             @Html.ValidationMessageFor(m => m.firstName)

             @Html.TextBoxFor(m => m.lastname, new { @class = "form-control" })
             @Html.ValidationMessageFor(m => m.lastname)
          </p>
          <p>

             @Html.TextBoxFor(m => m.email, new { @class = "form-control" })
             @Html.ValidationMessageFor(m => m.email)             
          </p>
          <p>

             @Html.TextBoxFor(m => m.remail, new { @class = "form-control" })
             @Html.ValidationMessageFor(m => m.remail)  

          </p>
          <p>

             @Html.TextBoxFor(m => m.password, new { @class = "form-control" })
             @Html.ValidationMessageFor(m => m.password)  

          </p>
          <p>
          <input class="radius title" name="signup" type="submit" value="Sign Up">
          </p>
    }
  </div> 

 <script src="~/Scripts/jquery.validate.min.js"></script>
public class RegisterViewModel
{
    [Required]
    [Display(Name = "Enter first name")]
    public string firstname{ get; set; }

    [Required]
    [Display(Name = "Enter lastname")]
    public string lastname{ get; set; }

    [Required]
    [Display(Name = "Enter Email")]
    public string email{ get; set; }

    [Required]
    [Display(Name = "Reenter email")]
    public string remail{ get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("password", ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }
}
控制器->操作

    public ActionResult Registration(RegisterViewModel model)
    {
        if (ModelState.IsValid)
        {
          /// you logic
        }
    }

使用在创建
MVC
projects时默认提供的插件谢谢您的回答。实际上,我需要用我的问题中所示的传统html替换所有这些razor语法。是否有任何方法可以对html输入进行任何验证。@LibinCJacob,
将所有这些razor语法替换为传统html,如我的问题所示
为什么要这样做?@LibinCJacob我访问此链接以了解这一点