英文:
Javascript if function only checks for one variable despite ||
问题
我使用PHP、JavaScript和HTML来创建一个网站，已登录的用户可以在聊天框中发表评论。我试图在创建帐户时验证输入的电子邮件，通过检查是否包含'@'和'.'。函数调用在HTML文件中。表单（包装器和主体除外）如下所示：
<form id="form" onsubmit="HandleSubmit(event)" action="accountcreation.php" method="POST"><label for="email">Email:</label><br><input type="text" id="email" name="email" required><br><label for="password">Password:</label><input type="password" name="password" required><br><br><button type="submit">Create account</button></form>
函数在下面被调用：
<script src="validate.js"></script><script>function HandleSubmit(e) {console.log("OnSubmit");// Validationif (!ValidateEmail("email")) {e.preventDefault();alert("Invalid input of email");return false;}}</script>
在validate.js文件中，函数构造如下：
function ValidateEmail(emailinputId) {const elem = document.getElementById(emailinputId);if (!elem.value.includes(".") || !elem.value.includes("@")) {return false;}return true;}
该网页仅在缺少'@'符号时发送警报，但对缺少'.'没有问题。
我需要在一天内解决这个问题，所以我在祈求救世主。
我尝试过使用'&&'和'||'，但没有成功。
我尝试在同一个函数内将'.'和'@'的检查分开为不同的if语句，也没有成功。
我将其更改为另一种版本：
function ValidateEmail(emailinputId) {const elem = document.getElementById(emailinputId);if (("." in elem) && ("@" in elem)) {return true;}return false;}
并以相同的方式调用它。
发生了相同的情况。问题是什么？
英文:
I am using php, javascript and html to create a website where logged in users can comment in a chatbox. I am trying validate the input email during account creation by checking if it includes '@' and '.'. The call to the function is within an html file. The form (wrapper and body excluded looks like this:
<form id="form" onsubmit="HandleSubmit(event)" action="accountcreation.php" method="POST"><label for="email">Email:</label><br><input type="text" id="email" name="email" required><br><label for="password">Password:</label><input type="password" name="password" required><br><br><button type="submit">Create account</button></form>
The function is being called below:
<script src="validate.js"></script><script>function HandleSubmit(e) {console.log("OnSubmit");// Validationif (!ValidateEmail("email")) {e.preventDefault();alert("Invalid input of email");return false;}}</script>
In the validate.js file the function is contructed like this:
function ValidateEmail(emailinputId) {const elem = document.getElementById(emailinputId);if ( !elem.value.includes(".") || !elem.value.includes("@")) {return false;}return true;}
The webpage only sends and alert when the '@' sign is missing but is fine with '.' missing.
I need to solve this within a day so I'm praying for a saviour.
I have tried with both && and || which didn't work.
I tried separating the '.' and '@' checks into separate if statements within the same function which didn't work.
I changed it to an alternate version:
function ValidateEmail(emailinputId) {const elem = document.getElementById(emailinputId);if ( ("." in elem ) && ("@" in elem)) {return true;}return false;}
And called to it in the same way.
Same thing happens. What is the issue?
答案1
得分: 0
你遇到的问题出现在你对逻辑运算符的使用上。在你的第一个ValidateEmail函数中，你使用了AND运算符(&&)，意味着两个条件都必须为假才会返回假。因此，如果任何一个字符（“.”或“@”）存在，它会返回真，这不是你想要的行为。
这是你函数的修改版本：
function ValidateEmail(emailinputId) {const elem = document.getElementById(emailinputId);return elem.value.includes(" . ") && elem.value.includes(" @ ");}function HandleSubmit(e) {console.log(" OnSubmit ");// 验证if (!ValidateEmail(" email ")) {e.preventDefault();alert(" Invalid input of email ");return false;}}
<form id="form" onsubmit="HandleSubmit(event)" action="accountcreation.php" method="POST"><label for="email">Email:</label><br><input type="text" id="email" name="email" required><br><label for="password">Password:</label><br><input type="password" name="password" required><br><br><button type="submit">Create account</button></form>
英文:
The issue you're experiencing lies within your usage of the logical operators in your condition. In your first ValidateEmail function, you're using the AND operator (&&), meaning both conditions have to be false to return false. So if any of the characters (either "." or "@") is present, it would return true which is not the behavior you want.
Here's a modified version of your function:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function ValidateEmail(emailinputId) {const elem = document.getElementById(emailinputId);return elem.value.includes(".") && elem.value.includes("@");}function HandleSubmit(e) {console.log("OnSubmit");// Validationif (!ValidateEmail("email")) {e.preventDefault();alert("Invalid input of email");return false;}}
<!-- language: lang-html -->
<form id="form" onsubmit="HandleSubmit(event)" action="accountcreation.php" method="POST"><label for="email">Email:</label><br><input type="text" id="email" name="email" required><br><label for="password">Password:</label><br><input type="password" name="password" required><br><br><button type="submit">Create account</button></form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论