html 点击注册 必写项,一个简单的Html注册网页

新用户注册

.register_div{font-family: "Microsoft YaHei";}

.form_text{height:35px;border:1px solid #aaaaaa;outline:none;margin-top:20px;font-size:14px;}

.form_text_big{width:70%;}

.form_text_small{width:20%;}

.login_button{width:70%;height:35px;outline:none;border:none;margin-top:20px;}

.links{color:rgb(50,187,119);}

.links:hover{color:rgb(0,137,69)}

.small{font-size:13px;}

.link_left{float:left;}

.link_right{float:right;}

input {font-family: "Microsoft YaHei";}

.s_green{background-color:rgb(50,187,119);color:#ffffff;}

.s_green:hover{background-color:rgb(0,137,69)}

.register_div{width:420px;height:550px;margin:80 auto;text-align:center;background-color:#ffffff;}

b2b94a178b2c18a26f261cf2a09ac0e3.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您提供一个基本的登录和注册界面,包含前端验证功能。但是,由于我并不知道您的具体需求和技术栈,所以这只是一个基本的示例,您可以根据自己的需求进行修改和优化。 HTML代码: ``` <!DOCTYPE html> <html> <head> <title>Login and Register Form</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ // 验证登录表单 $("#login-form").submit(function(event){ var username = $("#login-username").val(); var password = $("#login-password").val(); if(username == "" || password == ""){ event.preventDefault(); alert("用户名和密码不能为空!"); } }); // 验证注册表单 $("#register-form").submit(function(event){ var username = $("#register-username").val(); var password = $("#register-password").val(); var confirm_password = $("#register-confirm-password").val(); if(username == "" || password == "" || confirm_password == ""){ event.preventDefault(); alert("所有字段都是必填!"); } else if(password != confirm_password){ event.preventDefault(); alert("两次输入的密码不一致!"); } }); }); </script> </head> <body> <div class="container"> <h2>Login and Register Form</h2> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#login">Login</a></li> <li><a data-toggle="tab" href="#register">Register</a></li> </ul> <div class="tab-content"> <!-- 登录表单 --> <div id="login" class="tab-pane fade in active"> <form id="login-form" action="/login" method="post"> <div class="form-group"> <label for="login-username">Username:</label> <input type="text" class="form-control" id="login-username" name="username"> </div> <div class="form-group"> <label for="login-password">Password:</label> <input type="password" class="form-control" id="login-password" name="password"> </div> <button type="submit" class="btn btn-default">Login</button> </form> </div> <!-- 注册表单 --> <div id="register" class="tab-pane fade"> <form id="register-form" action="/register" method="post"> <div class="form-group"> <label for="register-username">Username:</label> <input type="text" class="form-control" id="register-username" name="username"> </div> <div class="form-group"> <label for="register-password">Password:</label> <input type="password" class="form-control" id="register-password" name="password"> </div> <div class="form-group"> <label for="register-confirm-password">Confirm Password:</label> <input type="password" class="form-control" id="register-confirm-password" name="confirm_password"> </div> <button type="submit" class="btn btn-default">Register</button> </form> </div> </div> </div> </body> </html> ``` 这个HTML代码使用了Bootstrap作为样式库,并使用了jQuery进行前端验证。 在登录表单中,我们只需要验证用户名和密码是否为空即可。如果为空,则弹出提示框并阻止表单提交。 在注册表单中,我们需要验证用户名、密码和确认密码是否为空,并检查两次输入的密码是否一致。如果有任何一个条件不满足,都会弹出提示框并阻止表单提交。 当用户点击登录或注册按钮时,表单会向服务器提交数据,并跳转到另一个网页。您需要在服务器端处理这些表单数据,并进行进一步的验证和处理。 当然,这只是一个简单的示例,您需要根据自己的需求进行修改和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值