Существует несколько способов проверки адреса электронной почты, введенного в текстовое поле; некоторые из них более всеобъемлющие и могут быть изменены, другие могут быть встроенными. Обычно простая проверка HTML5 быстра и эффективна и может быть достигнута в одной строке кода. Тем не менее, это также возможно сделать в JavaScript, как описано ниже.
Использование встроенных атрибутов HTML5 для проверки
Как Фин уже говорил:
Вы можете использовать проверку HTML5 для проверки ввода электронной почты.
<input id="emailinput" type="email" placeholder="Email Address" required/>
Свойство required требует, чтобы электронная почта была обязательной и правильно отформатированной перед отправкой.
Имея это в виду, вы можете добавить это к своему коду для получения следующего:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function logOptions() {
var s = document.getElementsByName('Interests')[0];
var text = s.options[s.selectedIndex].text;
console.log(text);
}
function logEmail() {
console.log(document.getElementById('emailinput').value);
}
function myFunction() {
logOptions();
logEmail();
}
</script>
</head>
<body>
<h2>Stay up to date with ecommerce trends <br>with Apples's
newsletter</h2>
<h4>Subscribe for free marketing tips</h4>
<!-- Sign up now button -->
<div id="container">
<button id="submitButton" onclick="myFunction()">Sign up now</button>
</div>
<!-- <div class="input form"> -->
<form>
<input id="emailinput" type="email" placeholder="Email Address" required/>
<select name="Interests">
<option value="" disabled selected>Interested in..</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
<option value="option4">Option4</option>
</select>
</form>
<svg>
<rect width="40" height="3" style="fill:lightgreen" />
</svg>
</body>
</html>
Проверка JavaScript
Вы можете разместить этот код внутри тегов скрипта в заголовке документа:
function validateEmail(emailField){
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if (reg.test(emailField.value) == false)
{
alert('Invalid Email Address');
return false;
}
return true;
}
... и замените поле ввода электронной почты на следующую строку:
<input type="text" placeholder="Email Address" onblur="validateEmail(this);" />