javascript - 验证用户输入以使用正则表达式获取字符和数字不起作用

Question

我正在对用户登录输入进行验证，我希望像 ab12123 一样。所以我通过 javascript 验证它以验证按钮单击。如果无效，则应显示一条消息。问题是该功能不起作用，我打开开发工具检查 JavaScript，没有错误。 View :

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            <label class="control-label col-md-2">
                User Login <span class="required" id="star">*</span>
            </label>
            <div class="col-md-4">

                @Html.TextBox("UserLogin", null, new { @class = "form-control", required = "required" , id= "UserLogin" })

                <div class="col-lg-3" id="checkID" hidden>
                    <label style="color:red">Please enter the ID in the Proper Format Numbers only EX:kl12123</label>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2">
                Username <span class="required" id="star">*</span>
            </label>
            <div class="col-md-4">
                @Html.TextBox("UserName" , null, new { @class = "form-control", required = "required", id = "UserName" } )

            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2">
                Groups <span class="required" id="star">*</span>
            </label>
            <div class="col-md-4">
                @Html.DropDownList("GroupID", null, htmlAttributes: new { @class = "form-control", required = "required" , id= "GroupID" })
                @Html.ValidationMessageFor(model => model.GroupID, "", new { @class = "text-danger" })
            </div>
        </div>



        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="button" class="btn btn-success" value="ValidateMe" onclick="ValidateMe()" />
            </div>
        </div>
    </div>
}

JavaScript:

 function ValidateMe() {
        //$('#GroupID').on('change', function () {

        var IDValid = false;
        var Login = $('#UserLogin').val();
        var name = $('#UserName').val();
        var GroupId = $('#GroupID').val();

            if (Login.length < 6) {
                $('#checkID').show();
                IDValid = false;
            }
            else {
                var regexnumber = new RegExp(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/);
                if (regexnumber.test(Login)) {
                    $('#checkID').hide();
                    IDValid = true;
                }
                else {
                    $('#checkID').show();
                    IDValid = false;
                }

            }
            if (IDValid == true) {
                var data = {
                    UserLogin: Login,
                    UserName: name,
                    UserGroup: GroupId
                };
                $.ajax({
                    type: 'POST',
                    url: '/Account/SaveUser',
                    data: data

                });
            }
    }

感谢您在此事上的帮助。 谢谢。

Answer 1

MVC 可以使用 jQuery-validate 自动处理客户端验证，这应该是预先设置的。它使用模型上的属性来设置验证要求，并使用 Html.HelperFor 扩展进行模型绑定(bind)。您应该在 App_Start/BundleConfig.cs 中看到这一行，确认它已安装:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

如果没有，您可以download it here ，解压缩并安装在 Scripts 目录中，并将以上行添加到 BundleConfig.cs 中。

您可以像这样使用此方法:

型号

using System.ComponentModel.DataAnnotations;

public class User
{
    [Required]
    [RegularExpression(@"(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}", ErrorMessage = "Please enter the ID in the Proper Format Numbers only EX:kl12123")]
    public string UserLogin { get; set; }
    [Required]
    public string UserName { get; set; }
    [Required]
    public int UserGroup
}

查看

@model Namespace.User

// Replace the @Html.TextBox() helpers with these:

@Html.TextBoxFor(model => model.UserLogin, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.UserLogin, "", new { @class = "text-danger" })

@Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })

@Html.DropDownListFor(model => model.UserGroup, null, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.UserGroup, "", new { @class = "text-danger" })

// Place the following at the very bottom of your view:
@section scripts
{
    @Scripts.Render("~/bundles/jqueryval")
}

给我们这个: