ASP.NET MVC中的表單驗證（使用javascript）

Question

我是asp.net mvc的新手，我已經進行了某種形式的驗證，並且我想在客戶端進行驗證，因此我在javascript中編寫了普通腳本，更加具體地講，我的問題是返回false（因為它不應該發送任何內容數據到服務器，仍然在頁面中，但不會發生），請注意：我用js在普通的html文件中測試了腳本，並且工作正常，但是正如我所說的，我對mvc不熟悉，所以我想知道是否有任何事情我錯過了工作，如果我在這個地方注意到（在這個地方沒有任何關於折騰的提法的話）會是一件好事（對於初學者來說沒有地方了:); 這也是我的代碼的一小段

@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)代替手動嘗試為email屬性創建輸入，並刪除所有onclick屬性

旁注：您正則表達式^[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（）函數應如下所示（調用Submit函數，而不是返回值）：

<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>