html 当从jqueryvalidationlibrary验证电子邮件表单时,它被阻止,因为它与数据库错误消息集成在一起

lndjwyie  于 2023-06-04  发布在  jQuery
关注(0)|答案(1)|浏览(191)

我面临着一个问题,而验证表单字段在客户端在asp.net核心验证消息是不工作,也有一些错误消息来自数据库,但如果你我做验证HTML,CSS和JavaScript它的工作正常。
在这里,到目前为止我所做的

<form class="ht_form" id="ht_form" action="" method="post">
                <div class="row ht_input-login">
                    <div class="col-12">
                        <div class="row mb-3 form-group">
                            <div class="col-sm-12 ht_form-control form-label">
                                <input type="email" name="email" id="email" class="form-control textbox-size"  value="@ValidEmail.Replace("@@", "@")"
                                       placeholder="Email ID" aria-describedby="emailError" autocomplete="off" required />
                            </div>
                        </div>
                       
                        <div class="row ht_sign-in">
                            <div class="col-sm-6 col-6">
                                <button type="submit" class=" btn text-white w-100 mb-3 ">Submit</button>
                            </div>
                        </div>

                      
                       


                    </div>
                </div>
            </form>
              @if (!IsvalidEmail)
                        {
                        
                                     <label class="row mb-3">
                                <p style="text-align:center;color:#a32035;margin-top:15px">
                                    Entered email id is not registered..
                                </p>
                            </label>
                                
                          
                        }

让我显示对该表单所做验证

$.validator.addMethod(
    "regex",
    function (value, element, regexp) {
        if (regexp && regexp.constructor != RegExp) {
            regexp = new RegExp(regexp);
        }
        else if (regexp.global) regexp.lastIndex = 0;
        return this.optional(element) || regexp.test(value);
    }, "Please enter a valid email like abc@gmail.com"
);

$().ready(function () {
    $("#ht_form").validate({
        rules: {
            email: {
                required: true,
                email: true,
                regex: /^\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i
            },
        },
        messages: {
            email: {
                required: "Please enter email address",
            },
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.closest('.form-group').append(error);
        },

    });
});
2ic8powd

2ic8powd1#

从你的问题来看,我认为Email属性需要验证以下三点:该值不能为空,格式适合电子邮件地址,并且此电子邮件尚未注册,因此您可以创建一个模型,如:

public class MyEmail
    {
        //[RegularExpression("xxxxxx",ErrorMessage ="")]
        [Required(ErrorMessage = "Please enter email address")]
        [EmailAddress(ErrorMessage = "Please enter a valid email like abc@gmail.com")]
        [Remote(action: "ValidateEmail", controller: "Home")]
        public string Email { get; set; }
    }

从上面的代码中,[Remote(action: "ValidateEmail", controller: "Home")]是一个远程验证,用于验证电子邮件是否已注册。
主控制器验证电子邮件操作:

public IActionResult ValidateEmail(string Email)
        {
            //mock check if email is  is already registered in the database
            List<string> emails = new List<string>();
            emails.Add("123456@gmail.com");
            emails.Add("654321@gmail.com");
            var result = emails.Where(x => x == Email).FirstOrDefault();

            if (result != null)
            {
                return Json(data: "This email is already been registered");
            }

            return Json(data: true);

        }

查看

@model MyEmail

<form class="ht_form" id="ht_form" asp-action="privacy" method="post">
    <div class="row ht_input-login">
        <div class="col-12">
            <div class="row mb-3 form-group">
                <div class="col-sm-12 ht_form-control form-label">
                    <input type="email" asp-for="Email" class="form-control textbox-size" 
                           placeholder="Email ID" aria-describedby="emailError" autocomplete="off" required />
                    <span asp-validation-for="Email" class="text-danger"></span>
                </div>
            </div>

            <div class="row ht_sign-in">
                <div class="col-sm-6 col-6">
                    <button type="submit" class=" btn text-black w-100 mb-3 ">Submit</button>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    @section Scripts {
        @{
            await Html.RenderPartialAsync("_ValidationScriptsPartial");
        }
        }
</script>

Gif演示

您可以参考此Docs了解更多内置验证属性。

相关问题