client-side-validation 相关问题

如果用户正在使用支持动态HTML(DHTML)的浏览器,则验证可以使用客户端脚本执行验证。它可以提供即时反馈,而无需往返服务器

检测reportValidity()当前是否在DOM元素上显示validationMessage?

在无效字段中调用reportValidity() 会导致验证消息以依赖于浏览器的方式显示。 但是,再次调用 reportValidity() 会导致验证消息消失......

回答 1 投票 0

验证表单而不提交[重复]

我有以下引导模式。 我有以下 Bootstrap 模式。 <div id="product-modal" class="modal" tabindex="-1" role="dialog"> <form> <input id="product-index" type="hidden" /> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 id="edit-title" class="modal-title"></h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-12"> <div class="mb-3"> <label asp-for="ShipProduct.ProductId" class="control-label"></label> <select asp-for="ShipProduct.ProductId" class="form-select" asp-items="Model.ProductOptions"></select> <span asp-validation-for="ShipProduct.ProductId" class="text-danger"></span> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="mb-3"> <label for="product-uom" class="control-label">Unit of Measurement</label> <input id="product-uom" type="text" class="form-control" readonly /> </div> </div> <div class="col-md-6"> <div class="mb-3"> <label asp-for="ShipProduct.InboundQuantity" class="control-label">Inbound Quantity</label> <input asp-for="ShipProduct.InboundQuantity" class="form-control" /> <span asp-validation-for="ShipProduct.InboundQuantity" class="text-danger"></span> </div> </div> </div> </div> <div class="modal-footer"> <button id="product-save" class="btn btn-primary">Save</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> </div> </div> </div> </form> </div> 我想使用 jQuery 非侵入式验证来验证表单数据。但是,我不想提交表格。 我有以下 JavaScript。它按预期工作。然而,代码运行后,表单被提交。 $('#product-save').on('click', function () { var $modal = $('#product-modal'); var $form = $modal.find('form'); $form.validate(); if ($form.valid()) { // Process input data } } 有谁知道为什么要提交表单以及如何停止它? type=button 自动提交表格。 您需要防止默认行为 $('#product-save').on('click', function (event) { event.preventDefault(); // <== This prevents it from submitting var $modal = $('#product-modal'); var $form = $modal.find('form'); $form.validate(); if ($form.valid()) { // Process input data } }

回答 1 投票 0

如何使用 jQuery 验证 10 位手机号码

有效手机号码 <div> <span id="mobile-valid"> <i class="fa fa-check"></i> Valid Mobile No </span> <span id="mobile-invalid" > Invalid mobile No </span> </div> <div> Mobile No </div> <div> <input id="mobile-num" type="text"/> </div> 如何使用 jQuery Ajax 对 10 位手机号码进行验证?只允许数字不能使用字符或字母数字字符。那么我如何使用 jquery Ajax 进行验证。我想在上面的输入框中显示无效的电子邮件。和(不想显示警报) 这对你有用... $(document).ready(function(){ $("#mobile-num").on("blur", function(){ var mobNum = $(this).val(); var filter = /^\d*(?:\.\d{1,2})?$/; if (filter.test(mobNum)) { if(mobNum.length==10){ alert("valid"); $("#mobile-valid").removeClass("hidden"); $("#folio-invalid").addClass("hidden"); } else { alert('Please put 10 digit mobile number'); $("#folio-invalid").removeClass("hidden"); $("#mobile-valid").addClass("hidden"); return false; } } else { alert('Not a valid number'); $("#folio-invalid").removeClass("hidden"); $("#mobile-valid").addClass("hidden"); return false; } }); }); .hidden{ display: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mobile"> <div class="input"> <div class="label"> <div class="label-1"> <span id="mobile-valid" class="hidden mob"> <i class="fa fa-check pwd-valid"></i>Valid Mobile No </span> <span id="folio-invalid" class="hidden mob-helpers"> <i class="fa fa-times mobile-invalid"></i>Invalid mobile No </span> </div> </div> <div class="row"> <div class="col-xs-3"> <div class="label-2"> Mobile No </div> </div> <div class="col-xs-9"> <input id="mobile-num" type="text" class="form-control form-change-element" /> </div> </div> </div> </div> <form action="#"> Mobile number: <input type="text" name="mobile" pattern="^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$" title="Enter Valid mobile number ex.9811111111" required> <input type="submit"> </form> 从 9、8、7 开始,您还可以添加更多。 您可以使用 https://regex101.com/ 进行测试 有效号码是。 9883443344 09883443344 919883443344 0919883443344 +919883443344 +91-9883443344 0091-9883443344 +91 -9883443344 +91- 9883443344 +91 - 9883443344 0091 - 9883443344 在你的 jquery 函数中尝试这段代码 var mobileNum = $(this).val(); var validateMobNum= /^\d*(?:\.\d{1,2})?$/; if (validateMobNum.test(mobileNum ) && mobileNum.length == 10) { alert("Valid Mobile Number"); } else { alert("Invalid Mobile Number"); } 试试这个代码。它包含手机的十位数字验证: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <style type="text/css"> body { padding: 10px; font-family: Arial; Font-size: 10pt; } span { font-weight:bold; } .san{ height: 26px; width: 250px; border: 1px solid #9E9E9E; padding: 5px; border-radius: 5px; margin: 10px; } </style> <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ $(document).ready(function() { $('#txtPhone').blur(function(e) { if (validatePhone('txtPhone')) { $('#spnPhoneStatus').html('Valid Mobil Number'); $('#spnPhoneStatus').css('color', 'green'); } else { $('#spnPhoneStatus').html('Invalid Mobile Number'); $('#spnPhoneStatus').css('color', 'red'); } }); }); function validatePhone(txtPhone) { var a = document.getElementById(txtPhone).value; var filter = /[1-9]{1}[0-9]{9}/; if (filter.test(a)) { return true; } else { return false; } } });//]]> </script> </head> <body> Phone Number: <input type='text' id='txtPhone' class="san" maxlength="10"/> <span id="spnPhoneStatus"></span> </body> </html> 试试这样的东西 var value = "1234567....."; var NumberRegex = /^[0-9]*$/; if(value.length <= 10){ if(NumberRegex.test(value)){ //do whatever you want to }else{ alert('invalid') } } 使用正则表达式对手机号码进行 Jquery 验证 验证包括: 只有 10 位数字(没有字母和特殊字符) 数字从6,7,8,9开始 <html> <body> <label>Mobile Number:</label> <input type="text" class="form-control mobile-valid"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.mobile-valid').on('keypress', function(e) { var $this = $(this); var regex = new RegExp("^[0-9\b]+$"); var str = String.fromCharCode(!e.charCode ? e.which : e.charCode); // for 10 digit number only if ($this.val().length > 9) { e.preventDefault(); return false; } if (e.charCode < 54 && e.charCode > 47) { if ($this.val().length == 0) { e.preventDefault(); return false; } else { return true; } } if (regex.test(str)) { return true; } e.preventDefault(); return false; }); }); </script> </body> </html> 演示点击这里! 这是验证您的手机号码格式的代码。这个函数返回一个布尔值。 function isValidMobileNumber(mobileNumber) { var mobileNumberPattern = /^[0-9]{10}$/; return mobileNumberPattern.test(mobileNumber); } if(isValidMobileNumber()){ //Valid mobile number format. }else{ //Invalid mobile number format. } var pattern= /^[0]*(\d{9})*\s*$/; 仅使用此模式来验证斯里兰卡号码。在上面的代码行中只验证以 0. 开头的手机号码

回答 8 投票 0

client_side_validations无效-验证哈希始终为空:(

我真的不知道我在做什么错。我在宝石的3-1稳定分支上。不知道这是错误还是我的愚蠢。 client_side_validations只是无法识别我的验证。这是我的...

回答 3 投票 0

RegularExpressionAttribute-如何使其对于客户端验证不区分大小写?

我有一个用于客户端验证的字符串:private const String regex = @“ ^(?:\ b(?:\ d {5}(?:\ s *-\ s * \ d {5} )?|(([AZ] {2})\ d {3}(?:\ s *-\ s * \ 1 \ d {3})?)(?(,, \ s *)?)+ $“;我在[...

回答 3 投票 21

Redux Form 7.4.2,如何防止表单在组件渲染时提交并显示错误

我正在使用reduxForm 7.4.2,在简单表单上进行客户端验证。表单正在页面加载时提交,并显示如下错误:我想防止表单在页面上提交...

回答 2 投票 2

jsf验证自定义消息

我是XHTML的新手,我需要有关验证消息的一些帮助。当我尝试在客户端上验证用户控件时,以完整格式获取错误消息,例如createUser:user:...

回答 1 投票 0

如何在保存按钮,当点击确认GridView的?

我有一个包含保存的ImageButton形式一个gridview。我想创建一个客户端的CustomValidator,检查电网是否为空。如果是空的话,我想...

回答 2 投票 1

ASP.NET Core +客户端验证:如果ViewBag和Model具有相同的属性名称,则不会生成data-val- *属性

我在ASP.NET Core 2.2中意识到,如果ViewBag和Model具有相同的属性名称,则不会生成data-val- *属性(在我的情况下,它是关于属性的“Title”)。由于缺少数据-val- * ...

回答 1 投票 1

ASP.NET MVC数据注释使用继承的RegularExpressionAttribute进行客户端验证

为了保持模型验证的清洁,我想实现自己的验证属性,如PhoneNumberAttribute和EmailAttribute。其中一些可以很好地实现为简单的类...

回答 2 投票 20

© www.soinside.com 2019 - 2024. All rights reserved.