Html 提交按钮上的 onclick 事件

onclick event on submit button

提问by Alvaro Gomez

I'm trying to make a verification that an input text has an email format after clicking submit buttom and calling a js function. The first problem i encounter is that after some tests, i've seen that it doesnt enter the called function. After this, i think everything should be ok, but just in case in order to not post 2 almost equal questions within minutes, ill include the most important part. Summarizing, it should check: -The email field is not null -The email field has an @ (without taking into account order etc)

我正在尝试在单击提交按钮并调用 js 函数后验证输入文本是否具有电子邮件格式。我遇到的第一个问题是，经过一些测试，我发现它没有进入被调用的函数。在此之后，我认为一切都应该没问题，但以防万一为了不在几分钟内发布 2 个几乎相同的问题，我将包含最重要的部分。总而言之，它应该检查： - 电子邮件字段不为空 - 电子邮件字段有一个 @ （不考虑顺序等）

Then it should tell if it found any problem, if not leave everything unchanged

然后它应该告诉它是否发现了任何问题，如果没有，则保持一切不变

I hope i made my point, if not i can try to explain it again..

我希望我表达了我的观点，如果没有我可以尝试再次解释它。

 <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>

回答by Tony

<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>

回答by Rainer Plumer

Instead of using onclick, i think you should use onsubmit and instead of comparing each character for @ symbol, you should use email test regular expressions.

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

there are plenty of those online, just google.

网上有很多，google一下。

sample regular expressions

示例正则表达式

回答by Deryck

Well I was about to write this myself but I happened to have found it like 4 hours ago. This will help you.

好吧，我正要自己写这个，但我碰巧在 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>

Your code had a lot of typos, just take your time when writing. This is from w3schools

你的代码有很多错别字，慢慢写吧。这是来自w3schools

回答by Marty Cortez

This question has already been marked as answered, but I feel that there a few key takeaways / learning points from the question, so i've added my input below, fwiw.

这个问题已经被标记为已回答，但我觉得这个问题有一些关键的要点/学习点，所以我在下面添加了我的输入，fwiw。

1. Right now the code in your question starts off with proceed() { ... }. You should change this to function proceed() { ... }to make it a proper function declaration
2. It's a good habit to define your variables at the top of your scope in which they are being used. As of now you have the emailand problemsvars declared next to each other, and that's good. However, var noatis all by itself a few lines down. Moving it up to the other declarations helps the reader of your code understand which variables are to be used in this function
3. On the fourth line of your function you check to see if emailis an empty string. If it is, you set the problemsvariable. But if it's empty, we can stop where we are. You can just return problems;and be done with the function.
4. It's already been pointed out, but email.indexOf("@")uses the native JS method to do what you're doing in the string iterator.
5. for(int i=0; ...)I thought the int i =0looked funny, so I tried typing it into the javascript console on my browser. I got an error. You can change this to for(var i = 0; ...)for the correct syntax.
6. Later on in the function we ask if email is empty again: if(email == ""). But we've already asked this question, and would have exited the function if it was true. We can't have an @symbol in the string if the string is empty.
7. This has been mentioned before but you probably want to use a regular expression to check the email.
8. Next we have noat = true. This will actually always evaluate to true because the result of the assignment is truthy. You're setting the value of noatto true, and javascript is like "Cool awesome looks good to me". It doesn't check if noatwas originally set to true or false.

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. 这实际上总是评估为真，因为分配的结果是真的。您将 的值设置noat为 true，而 javascript 就像“酷酷的真棒对我来说很好看”。它不检查noat最初是否设置为 true 或 false。

I've created and tested a jsfiddle that follows most of these recommendations. It also shows a way to make the code more concise and achieve a similar goal. Sorry if this comes off as too preachy/know-it-all, I definitely don't. This question piqued my interest and I had to respond!

我已经创建并测试了一个 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

提琴手