我想知道如何在提交到signUp.php之前使用javascript确认电子邮件是否有@标志?
<form action='signUp.php'>
<input type='text' name='email'>
<input type='text' name='firstName'>
<button value='submit'>
</form>
您需要使用此javascript:
/@/.test(document.forms[0].email.value)
在你的表单:
<button value='submit' onclick='javascript: if (/@/.test(document.forms[0].email.value) == true) { document.forms[0].submit(); } else { return; }' />
我更喜欢这样写:
HTML:<form action='signUp.php' id='theform'>
<input type='text' name='email' id='email'>
<input type='text' name='firstName'>
<button value='submit' onclick='javascript: checkform(); return;'>
</form>
var checkform = function() {
var theform = document.getElementById('theform');
if (is_email(document.getElementById('email').value))) {
theform.submit();
}
return;
}
var is_email = function(val) {
return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+'.(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum|travel)$/.test(val)
}
^[a-zA-Z0-9._%+-]+@[A-Z0-9.-]+'.(?:[a-zA-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum|travel)$是一个正则表达式，用于检查一个值是否为有效的电子邮件地址字符串。在你的问题中，你只要求测试@在你的字符串中的存在，但是，嘿!not@email将被匹配!您肯定不希望允许这样的字符串被视为有效的电子邮件字符串。
基本上，您希望在表单提交操作之前检查表单数据。所以你可以这样做:
-
<form onsubmit='if (!checkform()) reutrn;'>或 -
<input type='submit' onclick='checkform()' />
在checkform函数中，您验证字段数据，如果验证通过，则在html表单对象上调用submit方法，并返回false或不返回(例如return;)。
您还应该学习如何在这里的javascript中使用regular expressions
if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
// it's valid so do something
}
else {
// it's not valid so do something else
}
您可以捕获表单上的提交事件，检查email值，并有条件地允许或拒绝表单发送。使用jQuery(因为…为什么不呢?)你会这样做:
<script>
$(document).ready(function()
{
$('form').get(0).submit(function(event)
{
var email = $(this).find('input[name=email]').val();
if (email.match(/.+?@.+/) == false)
{
event.preventDefault();
return false;
}
});
});
</script>
只需使用type="email"和HTML5表单模拟旧浏览器。
http://thecssninja.com/javascript/H5F
https://github.com/ryanseddon/H5F
<input type='email' name='email'>
这不仅验证了它包含一个@，而且验证了一个正确的结构。
您必须在服务器上进行验证，但是您可以通过首先在客户端上进行检查来增加一些用户便利性:
function checkEmail(el) {
return /@/.test(el.value);
}
或者更友好一点:
function checkEmail(el) {
if (!/@/.test(el.value)) {
alert('Your e-mail address doesn''t have an "@"' +
' sign, please add one');
return false;
}
}
在页面中:
<form ... onsubmit="return checkEmail(this.email);" ...>