HTML 的 form 提交之前如何验证数值不为空? 为空的话提示用户并终止提交

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	  <script type="text/javascript">
	  	function check(){
		    var nameValue=window.document.getElementById("uname").value;
		    if (nameValue == "") // 或者是!nameValue
		    {
		    	window.alert("用户名不能为空!");
		        return false;
		    }
		    return true;
		}
	  </script>
  </head>
  <body>
	<form id="myform" method="post" action="test-2.html" οnsubmit="return check()">
		用户名:<input type="text" id="uname">
		<input type="submit" value="提交" id="sub">
	</form>
  </body>
</html>

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您提供一个简单的登陆页面,包括表单验证功能。以下是一个示例代码: HTML 代码: ``` <!DOCTYPE html> <html> <head> <title>Login Page</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="login-box"> <h2>Login Here</h2> <form id="login-form" method="post" action=""> <div class="user-box"> <input type="text" name="username" required=""> <label>Username</label> </div> <div class="user-box"> <input type="password" name="password" required=""> <label>Password</label> </div> <input type="submit" name="submit" value="Login"> </form> </div> <script src="script.js"></script> </body> </html> ``` CSS 代码: ``` * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; background: #34495e; } .login-box { width: 320px; height: 420px; background: #191919; color: #fff; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); box-shadow: 5px 5px 10px rgba(0,0,0,0.5); padding: 70px 30px; } h2 { margin: 0; padding: 0 0 20px; text-align: center; font-size: 22px; } .login-box label { position: absolute; top: 0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: 0.5s; } .login-box input[type="text"], .login-box input[type="password"] { position: relative; border: none; border-bottom: 1px solid #fff; background: transparent; outline: none; height: 40px; color: #fff; font-size: 16px; } .login-box input[type="text"]:focus, .login-box input[type="password"]:focus { border-bottom: 2px solid #fff; } .login-box input[type="submit"] { border: none; outline: none; height: 40px; background: #1c8adb; color: #fff; font-size: 18px; border-radius: 20px; } .login-box input[type="submit"]:hover { cursor: pointer; background: #39dc79; color: #000; } .login-box .user-box { position: relative; } .login-box .user-box input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } .login-box .user-box label { top: -20px; font-size: 14px; } .login-box .user-box input:focus ~ label, .login-box .user-box input:valid ~ label { top: -20px; font-size: 14px; } ``` JavaScript 代码: ``` const form = document.getElementById('login-form'); const username = document.getElementById('username'); const password = document.getElementById('password'); form.addEventListener('submit', (event) => { event.preventDefault(); checkInputs(); }); function checkInputs() { const usernameValue = username.value.trim(); const passwordValue = password.value.trim(); if (usernameValue === '') { setErrorFor(username, 'Username cannot be blank'); } else { setSuccessFor(username); } if (passwordValue === '') { setErrorFor(password, 'Password cannot be blank'); } else { setSuccessFor(password); } if (usernameValue !== '' && passwordValue !== '') { alert('Login successful!'); } } function setErrorFor(input, message) { const formControl = input.parentElement; const small = formControl.querySelector('small'); formControl.className = 'user-box error'; small.innerText = message; } function setSuccessFor(input) { const formControl = input.parentElement; formControl.className = 'user-box success'; } ``` 在这个示例中,我们使用 HTML、CSS 和 JavaScript 创建了一个简单的登陆页面。表单验证功能通过 JavaScript 实现,当用户提交表单时,我们将检查输入字段是否为空,如果为空,则显示错误消息,否则显示成功消息并允许用户登录。您可以将此示例代码复制到您的项目中,并根据需要进行修改。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值