窗体验证在asp.net mvc（使用javascript）

Question

我是新来的asp.net mvc和我有一些验证的aform，我想验证它在客户端，所以我写在JavaScript中的正常脚本 要更多specefic我的问题是返回false（因为它不应该发送任何数据到服务器，仍然apage，但这不会发生），注意：我测试脚本在正常的HTML文件与JS和工作正常 ，但正如我所说我不熟悉MVC，所以我想知道是否有任何我错过了它的工作，如果有任何toturial在这specefic点这将是很好的，因为我注意到在这个地方（没有地方对于初学者 ：）; 这是我的代码片段太

@model registerationex.Models.register 

@{ 
    ViewBag.Title = "Create"; 
} 


<h2>Create</h2> 

@using (Html.BeginForm()) { 
    @Html.ValidationSummary(false) 

    <fieldset> 
     <legend>register</legend> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.name) 
     </div> 

     <div class="editor-field"> 
      @Html.EditorFor(model => model.name) 
      <span id="error"></span> 
      @Html.ValidationMessageFor(model => model.name) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.email) 
     </div> 

     <div class="editor-field"> 
<input class="text-box single-line" data-val="true" data-val-required="The email field is required." id="email" name="email" type="text" value="" onblur="checkuser(email);">  
        <span id="erroruser"></span> 
      @Html.ValidationMessageFor(model => model.email) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.age) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.age) 
      <span id="errorage"></span> 
      @Html.ValidationMessageFor(model => model.age) 
     </div> 

     <p> 
      <input type="submit" value="Create" onclick="allvalidate();" /> 
     </p> 
    </fieldset> 
} 

<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 



@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 

} 

<script> 
    function allvalidate() { 
     var validated = true; 
     if (!validate()) validated = false; 
     if (!checkAge(age)) validated = false; 
     if (!checkuser(email)) validated = false; 

     return validated; 
    } 


    function validate() { 
     var txtf = document.getElementById('name'); 
     if (txtf.value == 0 || txtf.value == null) { 
      document.getElementById('error').innerText = ('you must enter firstname'); 
      document.getElementById('error').style.color = 'red'; 

      txtf.focus(); 
      return false; 
     } 
     else { 
      document.getElementById('error').innerText = (''); 
      return true; 
     } 
    } 


    function checkAge(input) { 
     if (input.value < 18 || input.value > 70) { 
      document.getElementById('errorage').innerText = ('age must be from 18 :70'); 
      document.getElementById('errorage').style.color = 'red'; 
      return false; 
     } 
     else { 
      document.getElementById('errorage').innerText = (''); 
      return true; 
     } 

    } 


    function checkuser(input) { 
     var pattern = '^[a-zA-Z]+$'; 
     if (input.value.match(pattern)) { 
      document.getElementById('erroruser').innerText = ''; 
      return true; 
     } 
     else { 
      document.getElementById('erroruser').innerText = ('enter valid email'); 
      document.getElementById('erroruser').style.color = 'red'; 

      return false; 
     } 


    } 



</script> 

Answer 1

您已包括@Scripts.Render("~/bundles/jqueryval")它默认jquery.validate.unobtrusive.js ，所以删除所有脚本并利用MVC附带的功能。只需将验证属性添加到您的属性。

[Required(ErrorMessage = "you must enter firstname")] 
public string name { get; set; } 

[EmailAddress(ErrorMessage = "enter valid email")] 
public string email { get; set; } 

[Required(ErrorMessage = "you must your age")] 
[Range(18, 70, ErrorMessage = "age must be from 18 : 70")] 
public int age { get; set; } 

，你的脚本正在尝试做的现在一切（不好）就是这样做出来的方块（假设未禁用不显眼的验证）和表单不会提交，直到错误得到纠正。你现在还获得服务器端验证是必要的验证（客户端验证只是一个不错的奖金，但任何人都可以很容易地通过它），所以你必须始终验证服务器上

也取代您手动尝试创建电子邮件属性输入与@Html.EditorFor(m => m.email)并删除所有onclick attibutes

旁注：你的正则表达式^[a-zA-Z]+$甚至不会允许输入一个有效的电子邮件地址（它甚至不容许@或.字符！）。使用EmailAddress]属性将产生正确的正则表达式是（从jQuery Validation 1.9.0）

^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$ 

Answer 2

的allvalidate（）函数应该像这样（调用提交功能，没有返回值）：

<script> 
     function allvalidate() { 
      var validated = true; 
      if (!validate()) validated = false; 
      if (!checkAge(age)) validated = false; 
      if (!checkuser(email)) validated = false; 

      if(validated) 
       $('[type="submit"]').submit(); 
     } 
    </script>