在输入字段中解释某些事件的最佳方式是什么

嵌套if语句，用于检查字段是否为空或是否符合其他参数

if (Name != '' && age != '') {
if(age >= 18)
alert("Successfully Submitted!"); 
else
alert("you must be over 18 :(");
}
else
alert("cant be empty :(");

如何检查具有多个参数的单个字段，并对每个事件做出相应响应，而不必嵌套一百万if语句？

嵌套if语句是其中一种方法，但另一种方法是使用保护子句：

参考

敏捷参与者#学习
- 保护条款
barker.代码
- 保护条款

我的解释

基本上，我们可以有一个函数，而不是使用嵌套的if语句来根据数据做某些事情。在这个函数中，我们可以有单个if语句和如果满足它的条件，它们可以首先执行一些东西，然后返回一些东西(退出函数，不允许移动到第二个if语句(。这种if语句被称为保护子句。但是，如果第一个保护子句的条件不满足，则将通过函数继续到下一个保护子句，依此类推，如果有更多的保护子句直到结束。关于保护条款，可能有点棘手的是，如果你要有不止一个，它们需要按照正确的顺序排列。顺序从独立变为依赖。例如，如果您有一个使用参数password的函数，并且您想对其进行一些检查，则只有在知道最初输入了密码后，才能检查密码是否太短。因此，在这种情况下，您的第一个guard子句需要检查是否输入了而不是密码。如果没有输入密码(password == "" || null(，return语句将用于立即退出函数，并且不允许继续执行第二个guard子句。之所以需要这样做，是因为第二个guard子句会检查密码是否太短，并且只有在首先输入密码的情况下才能这样做第二个保护子句依赖于第一个。如果您有第三个guard子句来检查密码是否太长，它也将取决于第一个guard语句，它也将依赖于第二个guard从句。例如，如果密码的长度小于4个字符，则不需要转到第三个guard子句来检查密码的长度是否超过20个字符。在我们的功能结束时(在我们所有的保护条款之后(，我们返回一些只有在所有保护条款的条件都不满足的情况下才能达到的东西。例如，在密码示例中，如果输入了密码，密码4个或更多个字符长，并且密码10个字符长以下，我们可以返回一个字符串，例如"valid password"。

另一个例子

假设你有一个功能来检查用户是否可以创建帐户。该函数采用两个参数canMakeAccount(name, password) {...}。它使用保护子句来检查这两个参数是否有效。第一个保护子句检查name和/或pass是否为""(字段为空(。如果满足此条件，则使用return关键字退出函数。该函数将返回一个对象：

return {
accountCanBeMade: false, 
message: "Fields cannot be left blank :("
}

但是，如果不满足条件(所有字段都已填写(，则程序继续执行该函数，再执行两个保护子句，并检查name是否过长或password是否太短。同样，如果这些guard子句的条件之一得到满足，则会执行类似的返回语句，只是对象中的消息属性不同。

参见以下示例

function canMakeAccount(name, pass) {
// if name or pass are empty strings
if (name == null || name == "" || pass == null || pass == "") {
return {
accountCanBeMade: false,
message: "Fields cannot be left blank :("
}
}
// if name is too long
if (name.length > 10) {
return {
accountCanBeMade: false,
message: "Username is over 10 characters :("
}
}
// if password is too short
if (pass.length < 4) {
return {
accountCanBeMade: false,
message: "Password is less than 4 characters :("
}
}
// if everything is filled out correctly
// (all fields filled, name not too long, pass not too short)
return {
accountCanBeMade: true,
message: "Have a nice day"
}
}

在上面的例子中，如果name是"；Jacob123和456〃和的传球是"；12〃，调用函数返回：

const nameVariable = "Jacob123and456";
const passVariable = "12";
const details = canMakeAccount(nameVariable, passVariable);
// 'details' returns
//
// => {
//     accountCanBeMade: false, 
//     message: "Username is over 10 characters :("
// }

以上完整示例的代码段：

const inpName = document.querySelector("input#inp-name");
const inpPass = document.querySelector("input#inp-pass");
const btnCheck = document.querySelector("button");
const pInfo = document.querySelector("p#info");
function canMakeAccount(name, pass) {
// if a field was left blank
if (name == null || name == "" || pass == null || pass == "") {
return {
accountCanBeMade: false,
message: "Fields cannot be left blank :("
}
}
// if name is too long
if (name.length > 10) {
return {
accountCanBeMade: false,
message: "Username is over 10 characters :("
}
}
// if password is too short
if (pass.length < 4) {
return {
accountCanBeMade: false,
message: "Password is less than 4 characters :("
}
}
// if everything is filled out correctly
return {
accountCanBeMade: true,
message: "Have a nice day"
}
}
btnCheck.addEventListener("click", () => {
const data = canMakeAccount(inpName.value, inpPass.value);
let text = "";
// if user has filled out everything correctly
if (data.accountCanBeMade) text += "<strong>You can make your account!</strong> :)<br>";
// else (if a field was empty or name was too long or password was too short)
else text += "<strong>You can't make your account! </strong> :(<br>";
// write dots
text += "<strong>...</strong><br><br>";
// write message
text += data.message;
// show text in the page
pInfo.innerHTML = text;
});

input, button {
display: block;
margin-bottom: 0.5rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" placeholder="Enter a Username" id="inp-name">
<input type="text" placeholder="Enter a Password" id="inp-pass">
<button>Can I make my account?</button>
<br>
<p id="info"></p>
<script src="script.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：