提交按钮的onclick事件

Question

我想在单击提交按钮并调用js函数后进行输入文本的验证，以确保其为电子邮件格式。我遇到的第一个问题是，在一些测试之后，我发现它没有进入被调用的函数。此后，我认为一切都应该没问题了，但为了不在几分钟内发布两个几乎相同的问题，我将包含最重要的部分。 总结一下，它应该检查： -电子邮件字段不为空 -电子邮件字段中有@符号（不考虑顺序等） 然后它应该告诉我们是否发现了任何问题，如果没有，则保持一切不变。希望我已经表述清楚，如果没有，我可以再试着解释一下...

 <input type="text" name="email" id="email">
    <input type="submit"  onclick=" proceed()"/>
<script>
    proceed(){
        var email= document.getElementById('email').value;
        var problems;
        if (email == ""){
            problems = "Empty variable \n";

        }

        var noat = true;
        for (int i=0; email.length; i++){
            if (email.charAt(i) == "@"){  //Compare each character
                noat=false;
                break;
            }
        }

        if (email=="" || noat=true){
            problems += "No @ \n"
            alert(problems);                        
        }
    }

</script>

- Alvaro Gomez

---

这是你的整个HTML吗？<script/>标签在哪里？ - Benjamin Toueg

不，只有我遇到困难的部分。其他只是一些填充问题。抱歉，我忘记了脚本标签，我已经添加了它。 - Alvaro Gomez

Answer 1

<form onsubmit="return proceed();">
    <input type="text" name="email" id="email">
    <input type="submit" />
</form>

<script>
    function proceed() {
        var email = document.getElementById('email').value;
        var problems = "";

        if (email == "") {
            problems = "Empty variable \n";
        }

        var noat = false;
        if (email.indexOf("@") == -1) noat = true;

        //    for (int i=0; i< email.length; i++){
        //    if (email.charAt(i) == "@"){  //Compare each character
        //       noat=false;
        //       break;
        //}

        if (email == "" || noat == true) {
            problems += "No @ \n";
            alert(problems);
        }

        if (problems == "")
            return true;
        else
            return false;
    }
</script>

- Tony

---

考虑使用正则表达式来验证电子邮件。 - Tony

但我不知道为什么变量电子邮件没有获取插入输入框中的字符串，我尝试打印它，但我没有得到任何结果。 - Alvaro Gomez

更新的答案，请再试一次。 - Tony

更新了答案，请再试一次。 - Tony

但我认为在JavaScript中定义=""或留下未定义的变量是一样的，不是吗？ - Alvaro Gomez

[var problems; // 未定义][var problems = ""; // 空字符串] - Tony

Answer 2

我认为你应该使用onsubmit而不是onclick，并且不要逐个字符比较@符号，而应该使用电子邮件测试正则表达式。

在线上有很多这样的正则表达式，只需要谷歌一下即可。

示例正则表达式

- Rainer Plumer

Answer 3

我本来要自己写这个，但是我在大约4小时前偶然发现了它。这会帮助你。

<script>
function proceed()
{
var email = document.getElementById("email").value;
var atpos = email.indexOf("@");
var dotpos = email.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
};
</script>

<form onsubmit="proceed();">
    <input type="text" name="email" id="email" />
    <input type="submit" />
</form>

你的代码中有很多错别字，请在编写时仔细检查。这段话来自于w3schools。

- Deryck

Answer 4

这个问题已经被标记为已回答，但我认为这个问题有一些关键要点/学习点，因此我在下面添加了我的意见，供参考。

1. 现在你的问题中的代码以 proceed() { ... } 开始。你应该将其更改为 function proceed() { ... } 以使其成为一个正确的函数声明。
2. 在使用变量时，定义变量位于其作用域顶部是一个好习惯。目前，您已经将email和problems变量声明在一起，这很好。但是，var noat 却独立在几行之外。将它移到其他声明处有助于代码读者了解哪些变量将在此函数中使用。
3. 在函数的第四行，您检查email是否为空字符串。如果是，则设置problems变量。但是，如果它为空，我们可以停止当前操作。您只需return problems;即可完成函数。
4. 已经指出过了，但是email.indexOf("@")使用JS本机方法来执行您在字符串迭代器中执行的操作。
5. for(int i=0; ...) 我认为int i =0看起来很奇怪，所以我尝试在我的浏览器上将其输入到javascript控制台中。我得到了一个错误。您可以将其更改为for(var i = 0; ...)以获得正确的语法。
6. 稍后在函数中，我们再次询问电子邮件是否为空：if(email == "")。但是，如果它为空，我们已经询问过这个问题，并且将退出函数。如果字符串为空，我们无法在其中有一个@符号。
7. 这已经被提到过了，但您可能想使用正则表达式来检查电子邮件。
8. 接下来，我们有noat = true。这实际上总是评估为true，因为赋值的结果是真值。您正在将noat的值设置为true，而javascript会像“很酷，看起来很好”。它不会检查noat最初是设置为true还是false。

我创建并测试了一个jsfiddle，遵循了大部分的建议。它还展示了一种使代码更加简洁并实现类似目标的方法。如果这听起来太唠叨/自以为是，请原谅，我绝对不是。这个问题引起了我的兴趣，我必须回复！

window.proceed = function () {
    var email = document.getElementById('email').value;
    if (email == "") {
        alert("Empty variable \n");
    } else if (email.indexOf("@") == -1) {
        alert("No @ \n");
    } else return true; 
}

jsfiddle

的翻译是：在HTML中保留链接到jsfiddle的文本。

- Marty Cortez