窗體驗證在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>