gpt4 book ai didi

javascript - 如何使用 jQuery 验证美国邮政编码并在 Bootstrap 模板中的文本字段上方以红色显示错误消息?

转载 作者:行者123 更新时间:2023-12-03 11:45:14 25 4
gpt4 key购买 nike

我正在为我的网络应用程序使用 Bootstrap 模板。现在,在一种表单中,我接受用户提供的美国邮政编码值,将表单提交到所需页面并显示结果。

现在我必须对其进行验证,如下所示:

  • 用户在输入字段“zip_code”中输入的值只能是有效的美国邮政编码。如果他/她输入无效值,则用于输入邮政编码的文本字段上方应显示红色错误消息。该表单不应提交。
  • 此验证应通过使用 jQuery 并单击 map 标记图标来完成,我将其设置为类似于提交按钮。

以下是必要的 HTML 代码片段:

<div class="nav-collapse">
<ul class="nav pull-right navbar-fixed-bottom">
<li><a href="#"><i class="icon-user icon-black"></i> LOGIN</a></li>
<li><a href="#"><i class="icon-pencil icon-black"></i> REGISTER</a></li>
<li><a href="#"><i class="icon-edit icon-black"></i> STATUS</a></li>
<li><a href="#"><i class="icon-envelope icon-black"></i> CONTACT</a></li>
<li><a href="#"><i class="icon-user icon-black"></i> MY ACCOUNT</a></li>
<li><a href="#"><i class="icon-user icon-black"></i> SHOP DESTINATOR</a></li>
<li>
<form action="abc.php" class="navbar-form pull-right" id="formzip" method="post">
<input style="width: 115px;" type="text" placeholder="Enter the zip code" name="zip_code" id="zip_code" value=""> <i class="icon-map-marker icon-black" onclick='$("#formzip").submit();'></i>
</form>
</li>
</ul>
</div><!--/.nav-collapse -->

由于我对 Bootstrap 框架比较陌生,有人可以在这方面帮助我吗?

感谢您花费宝贵的时间来理解我的问题。如果您需要有关我的问题的任何其他信息,请告诉我。任何形式的帮助将不胜感激。

等待您的宝贵回复。

最佳答案

请在发布问题之前先搜索,检查上一个问题,它可能对您有帮助

How to validate US ZIP code using jQuery Validation plugin

您也可以使用 JavaScript,

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function IsValidZipCode(zip) {
var isValid = /^[0-9]{5}(?:-[0-9]{4})?$/.test(zip);
if (!isValid) {
document.getElementById("ErrorDiv").innerHTML = "Invalid";
return false;
} else {
document.getElementById("ErrorDiv").innerHTML = "";
return true;
}
}
</script>
</head>
<body>
<form id="form1">
<input id="txtZip" name="zip" type="text" /><div id="ErrorDiv" style="color: red"></div>
<br />
<input id="Button1" type="submit" value="Validate"
onclick="return IsValidZipCode(this.form.zip.value)" />
</form>
</body>
</html>

谢谢

关于javascript - 如何使用 jQuery 验证美国邮政编码并在 Bootstrap 模板中的文本字段上方以红色显示错误消息?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26085462/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com