邮箱校验web前端代码
时间: 2023-10-09 21:09:22 浏览: 65
以下是一个简单的邮箱校验的Web前端代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Email Validation</title>
</head>
<body>
<h1>Email Validation</h1>
<label for="email">Enter your email address:</label>
<input type="text" id="email" name="email">
<button onclick="validateEmail()">Submit</button>
<p id="result"></p>
<script>
function validateEmail() {
// 获取用户输入的邮箱地址
var email = document.getElementById("email").value;
// 邮箱校验正则表达式
var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
// 校验邮箱地址
if (regex.test(email)) {
document.getElementById("result").innerHTML = "Email address is valid.";
} else {
document.getElementById("result").innerHTML = "Email address is invalid.";
}
}
</script>
</body>
</html>
```
该代码使用了正则表达式来校验邮箱地址的格式是否合法。用户输入邮箱地址后,点击提交按钮,JavaScript函数validateEmail()将获取用户输入的邮箱地址,并使用正则表达式进行校验。如果邮箱地址格式正确,则显示"Email address is valid.",否则显示"Email address is invalid."。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)