JavaScript：表单：在发送之前验证电子邮件地址并使用 Starts.With 检查另一个字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20301237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript: Form: Validating e-mail address and checking another field with Starts.With before sending
提问by Ross
I am a total JavaScript noob, but I have been searching for a solution for quite some time now and can't seem to find it.
我是一个完全的 JavaScript 菜鸟，但我一直在寻找解决方案已经有一段时间了，但似乎找不到它。
What I want to do is: Before sending a form, check if the entered e-mail address is valid and also check if the input of the phonefield starts with http://.
我想要做的是：在发送之前form，检查输入的电子邮件地址是否有效，并检查该phone字段的输入是否以开头http://。
Validating the e-mail address is working like a charm. However, the second part isn't. The formis just sent without any alertor anything.
验证电子邮件地址就像一种魅力。然而，第二部分不是。在form刚刚发送没有任何alert或任何东西。
Can someone enlighten me? Thank you!
有人可以启发我吗？谢谢！
function validate(){
var email = document.getElementById('email').value;
var phone = document.getElementById('phone').value;
var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email)) {
alert('Please enter a valid e-mail address.');
return false;
}
else if (phone.StartsWith("http://")) {
alert('Please correct your phone number.');
return false;
}
}
For anyone wondering: this is supposed to be a "simple" spam blocker.
对于任何想知道的人：这应该是一个“简单”的垃圾邮件拦截器。
Maybe it would be even more interesting if the phonefield was checked for any characters except numbers, plus, spaces, hyphens and dots...
如果phone检查该字段是否有除数字、加号、空格、连字符和点以外的任何字符，也许会更有趣……
What do you think?
你怎么认为？
回答by Koen Peters
First to answer your question:
首先回答你的问题：
Edit: Nowadays JavaScript does have a startsWith function on the String object.
编辑：如今 JavaScript在 String 对象上确实有一个 startsWith 函数。
JavaScript does not have a 'StartsWith'method on the String object. You will have to use regular expressions for this. Here's an example:
JavaScript 没有'StartsWith'String 对象的方法。为此，您将不得不使用正则表达式。下面是一个例子：
function validate() {
var email = document.getElementById('email').value;
var phone = document.getElementById('phone').value;
var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
var phoneFilter = /^http:\/\//;
if (!emailFilter.test(email)) {
alert('Please enter a valid e-mail address.');
return false;
}
if (!phoneFilter.test(phone)) {
alert('Please correct your phone number.');
return false;
}
return true;
}
I created a jsfiddle to show you how it works: http://jsfiddle.net/cnVQe/1/
我创建了一个 jsfiddle 来向你展示它是如何工作的：http: //jsfiddle.net/cnVQe/1/
However: it's best to use a declarative instead of a programmatic approach for validating forms. There are many tools that do this. One of them is this jQuery library that does most of the heavy listing for you: http://jqueryvalidation.org/
但是：最好使用声明式而不是编程式方法来验证表单。有很多工具可以做到这一点。其中之一是这个 jQuery 库，它为您完成了大部分繁重的列表：http: //jqueryvalidation.org/
It works by just adding classes to to the fields and have the plugin do the checking , error displaying and preventing of form submission.
它的工作原理是向字段添加类，并让插件进行检查、错误显示和防止表单提交。
Just to add: you approach is not wrong, but if the form gets bigger and you want to check more fields you will inevitably run into complexity that has been solved over and over by other people. Even if it means that you pull in additional complexity with the extra plugin it will all be worth it as soon as you start to make the form bigger.
补充一点：你的方法没有错，但是如果表单变大并且你想检查更多的字段，你将不可避免地遇到其他人一遍又一遍地解决的复杂性。即使这意味着您使用额外的插件增加了额外的复杂性，一旦您开始使表单更大，这一切都是值得的。
Also: your regular expression for the e-mail address check will not accept the +sign, which is something many people use to create special gmail accounts like [email protected]. Using libraries such as the one I describes very often have robust checks already. So that's an additional benefit on using existing libraries.
另外：您用于电子邮件地址检查的正则表达式将不接受该+标志，许多人使用该标志来创建特殊的 gmail 帐户，例如[email protected]. 使用诸如我所描述的库之类的库通常已经进行了稳健的检查。所以这是使用现有库的额外好处。
回答by Julien F.
You need a phone number checker function to be sure that the number is correct. Here it goes : http://www.w3resource.com/javascript/form/phone-no-validation.php
您需要电话号码检查器功能以确保号码正确。在这里：http: //www.w3resource.com/javascript/form/phone-no-validation.php
