I want to alert an error message
Question
我目前正在使用警报来通知用户，如果他们的电子邮件输入无效，但是我想警报错误消息。
4 answers
solution1
0 2018-05-05 07:08:54
You can use HTML5 validation to validate an email input.
<input id="emailinput" type="email" placeholder="Email Address" required/>
The 'required' property makes it so that an email is both required and formatted correctly before being submitted.
solution2
0 2018-05-05 07:44:46
There are several ways an email address entered into a text field can be validated; some are more comprehensive and can be manipulated, others can be built-in. Usually, a simple HTML5 validation is quick and effective and can be achieved in one line of code. However, it is also possible to do it in JavaScript as outlined below.
Using Built-In HTML5 Attributes To Validate
As Fin has previously said:
You can use HTML5 validation to validate an email input.
<input id="emailinput" type="email" placeholder="Email Address" required/>
The 'required' property makes it so that an email is both required and formatted correctly before being submitted.
With this in mind, you can add this to your code to produce the following:
<!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 Validation
You can place this code inside your script tags in the head of the document:
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;
}
...and replace your email input feild with this line:
<input type="text" placeholder="Email Address" onblur="validateEmail(this);" />
solution3
0 2018-05-05 07:53:52
just create a span below the email input element
<span id="emailerror"></span>
and change your alert code to this
document.getElementById('emailerror').textContent="input not valid!";
solution4
0 2018-05-05 20:35:02
You can do that by adding an empty span element eg. <span id='errorMessage'></span>
right below the email input tag. And then editing function checkEmail() as below:
function checkEmail() {
if (!document.getElementById("emailinput").checkValidity()) {
alert("input not valid!");
document.getElementById('errorMessage').innerHTML = "Input not valid";
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.