用html实现设计网站登录页面网站登录页面 图书名人美食 景点电影节日游戏|产品运动.... 用户输入Email和密码 用JS实现当输入Email或密码为空时提示用户,Email格式不符时提示用户提示方式不限,可以使用弹窗,文字、按键禁用等方式
时间: 2024-03-22 07:36:53 浏览: 16
好的,我会接受你的挑战!下面是一个简单的HTML代码示例,实现了一个网站的登录页面。同时,我使用了JavaScript代码,以实现当用户输入Email或密码为空时,或者Email格式不符时,提示用户相应的信息。
```html
<!DOCTYPE html>
<html>
<head>
<title>网站登录页面</title>
<meta charset="UTF-8">
<style>
/* 样式表可以自己定义 */
</style>
</head>
<body>
<h1>网站登录</h1>
<form onsubmit="return validateForm()">
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="登录">
</form>
<script>
function validateForm() {
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
if (email == "" || password == "") {
alert("请输入Email和密码!");
return false;
}
var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (!emailRegex.test(email)) {
alert("请输入正确的Email格式!");
return false;
}
return true;
}
</script>
</body>
</html>
```
在上面的代码中,我首先创建了一个包含Email和密码输入框的表单。在表单中添加了一个onsubmit属性,当用户点击“登录”按钮时,会执行validateForm()函数。
在validateForm()函数中,我首先获取了输入框中的Email和密码值,并通过if语句判断它们是否为空。如果为空,则通过alert()函数提示用户输入Email和密码,并返回false,阻止表单提交。
接着,我使用一个正则表达式emailRegex,来验证用户输入的Email格式是否正确。如果不正确,则同样通过alert()函数提示用户输入正确的Email格式,并返回false,阻止表单提交。
最后,如果用户输入的Email和密码都不为空,并且Email格式也正确,那么validateForm()函数返回true,允许表单提交。
这样,当用户输入不合法的Email或者为空时,就会通过JavaScript代码提示用户相应的信息,提高网站的交互性和用户体验。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)