验证 Javascript 中的多个部分

Validate multiple sections in Javascript

本文关键字：个部 Javascript 验证      更新时间：2023-09-26

我的编码遇到了一个小问题。我正在常规的旧记事本中构建它（请不要判断）作为我自己的个人壮举。除此之外，我只想使用Javascript和HTML，以及CSS来构建它。

我的代码如下：
.HTML

<html>
<h1>Please join our email list</h1>
<body>
<script language="javascript" src="country.js"></script>
<form name="myForm">
<label for="email_address1">Email Address:</label>
<input type="text" id="email_address1" name="email_address1">
<span id="email_address1_error">*</span><br></br>
<label for="email_address2">Re-enter Email Address:</label>
<input type="text" id="email_address2" name="email_address2">
<span id="email_address2_error">*</span><br></br>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name">
<span id="first_name_error">*</span><br></br>
<label for="select_country">Select your country:</label>
<select id="myList" onchange="choice(),validate()">
<option value="0"></option>
<option value="1">United States</option>
<option value="2">Canada</option> 
</select><span id="country_error"> *</span><br></br>
<span for="res_code" id="res_code_lbl">Zip/Province Code: </span><input type="text" id="res_code" name="res_code"><span id="res_code_error"> *</span>
<br></br>
<button type="button" id="joinButton" onclick="validate(),joinList()">Join Our List</button>
</form>
</body>
</html>

爪哇语

function validate(){
var e = document.getElementById("myList");
var f = e.options[e.selectedIndex].value;
if(f == 0)
{
document.getElementById("country_error").innerHTML="Choose a country!";
}
else{
document.getElementById("country_error").innerHTML="*";
}
}
function choice(){
var e = document.getElementById("myList");
var f = e.options[e.selectedIndex].value;
if(f == 1){
document.getElementById("res_code_lbl").innerHTML="Zip Code: ";
}
else if(f == 2){
document.getElementById("res_code_lbl").innerHTML="Province Code: ";
}
}
function joinList(){
var e1 = document.getElementById("email_address1").value;
var e2 = document.getElementById("email_address2").value;
var n = document.getElementById("first_name").value;
var c = document.getElementById("res_code").value;
if(e1 == null){
document.getElementById("email_address1_error").innerHTML="Enter your email address!";
}
else{ 
document.getElementById("email_address1_error").innerHTML="*";
if(e1 != e2){
document.getElementById("email_address2_error").innerHTML="Your email address must match!";
}
else{
document.getElementById("email_address2_error").innerHTML="*";
if(n == null){
document.getElementById("first_name_error").innerHTML="Enter your first name!";
}
else{
document.getElementById("first_name_error").innerHTML="*";
if(c == null){
document.getElementById("res_code_error").innerHTML="Enter a valid State/Province Code!";
}
else{
document.getElementById("res_code_error").innerHTML="*";
if((e1 != null) && (e1 = e2) && (n != null) && (c != null)){
location.href='countryjoin.html';
}
}
}
}
}
}

我知道这很多，所以我会省去你的 CSS :P 基本上我想验证没有一个输入是空的。当验证函数运行时，它似乎允许所有字段通过，就好像它们不是空的一样，即使它们是，但从不启动 location.href 中的更改。唯一正常工作的字段是选择列表。这将在更改和单击提交按钮时起作用。

任何反馈都非常感谢！谢谢！

与其将这些值与 null 进行比较，不如将它们与空字符串进行比较，因为如果不在文本框中输入，这就是值。我还会向trim()添加一个调用，以确保他们没有只输入空格。

if (n.trim() === "") {
  //it is empty
}

在调试过程中，查看其中一个变量的值会很有帮助;这样就可以立即发现它们不是空的，而是空字符串。

小提琴演示

相关文章：