尝试验证用户输入时出现基本 jQuery 语法问题 - 请指教
Basic jQuery syntax problems while trying to validate user input - please advise
我是编码新手,因为我相信您可以从我的问题中看出,因为我觉得这应该很容易完成,但我为此苦苦挣扎的时间比我承认的要长,现在必须求指导。
在下面的代码中,每次输入时我都会收到警报 "Not a Zip Code" - 无论它是否是有效的邮政编码。
$("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)"
};
});
为了解决这个问题——当我替换:alert("Not a Zip Code");
使用(此时我已经尝试了多种格式,但一个示例是:
$("#userInput").addClass('red');
对于以上内容,我在 CSS 中添加了以下内容:
.red::placeholder {
color: red;
}
我也在这个版块上搜索过类似的问题,但它们要么比我目前的理解更高级,要么使用我还不熟悉的程序。
预先感谢您的协助!
- 使用JS的RegExp.prototype.test()
- 使用jQuery的
.toggleClass()
method
- 对美国邮政编码使用这个更简单的正则表达式:
^\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>
我是编码新手,因为我相信您可以从我的问题中看出,因为我觉得这应该很容易完成,但我为此苦苦挣扎的时间比我承认的要长,现在必须求指导。
在下面的代码中,每次输入时我都会收到警报 "Not a Zip Code" - 无论它是否是有效的邮政编码。
$("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)"
};
});
为了解决这个问题——当我替换:alert("Not a Zip Code"); 使用(此时我已经尝试了多种格式,但一个示例是:
$("#userInput").addClass('red');
对于以上内容,我在 CSS 中添加了以下内容:
.red::placeholder {
color: red;
}
我也在这个版块上搜索过类似的问题,但它们要么比我目前的理解更高级,要么使用我还不熟悉的程序。 预先感谢您的协助!
- 使用JS的RegExp.prototype.test()
- 使用jQuery的
.toggleClass()
method - 对美国邮政编码使用这个更简单的正则表达式:
^\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>