jquery - 尝试验证用户输入时的基本 jQuery 语法问题 - 请告知
问题描述
我是编码新手,因为我相信您可以从我的问题中看出,因为我觉得这应该很容易完成,但是我在这个问题上挣扎的时间比我愿意承认的要长,现在必须寻求指导。
在下面的代码中,每次输入时我都会收到“不是邮政编码”的警报——无论它是否是有效的邮政编码。
$("body").on("click", "#searchBtn", function (event) {
event.preventDefault();
// The below is a regular expression (regex) to ensure user enters either a 5 digit or 9 digit US zip code format
var zip = ("^[0-9]{5}(?:-[0-9]{4})?$;");
var input = $("#userInput").val().trim();
if (input!=zip) {
alert("Not a Zip Code"); //the end goal is to have the placeholder color turn red
} else {
alert("Thank you - your entry is valid"); //the end goal is to have the placeholder say "You are searching in zip code " (+ zip)"
};
});
捎带这个问题 - 当我更换:警报(“不是邮政编码”); 使用(此时我已经尝试了多种格式,但一个示例是:
$("#userInput").addClass('red');
对于上述内容,我在我的 CSS 中添加了以下内容:
.red::placeholder {
color: red;
}
我也在这个板上搜索了类似的问题,但它们要么比我目前的理解更高级,要么使用我还不熟悉的程序。预先感谢您的协助!
解决方案
- 使用 JS 的RegExp.prototype.test()
- 使用 jQuery 的
.toggleClass()
方法 - 对美国邮政编码使用这个更简单的 RegExp:
^\d{5}(-\d{4})?$
$("body").on("click", "#searchBtn", function(event) {
event.preventDefault();
var $input = $("#userInput");
var input = $input.val().trim();
// Ensure user enters either a 5 digit or 9 digit US zip code format
var isValid = /^\d{5}(-\d{4})?$/.test(input);
$input.toggleClass('is-invalid', !isValid);
alert(isValid ? "Thank you - your entry is valid" : "Not a Zip Code");
});
.is-invalid::placeholder { /* Don't use color-specific classes! */
color: red;
}
<input id="userInput" type="text" placeholder="Enter US ZIP code">
<button id="searchBtn">SEARCH</button>
<script src="//code.jquery.com/jquery.min.js"></script>
推荐阅读
- javascript - 如何在按钮单击 Reactjs 上增加项目?
- python - 反转链表改变原来的链表
- r - R Shiny - 如何在会话开始时检查查询字符串
- java - 尝试使用资源(PreparedStatements)
- react-native - 在 react-native < 0.60 中处理 UIWebView(和 Apple Store 警告)的另一种方法
- python - 作为另一个函数的参数的函数
- haskell - 类型构造函数后面的值的异构列表 (HList) 的类型
- flutter - Flutter - 存储经过身份验证的用户详细信息
- typescript - TypeScript:强制转换整个类类型
- php - HTML表单发布方法和url的PHP cURL问题