javascript - 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) 替换手动尝试为电子邮件属性创建输入，并删除所有 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])))$