javascript 验证表单_html+javascript验证表单-优快云博客

本文链接：https://blog.youkuaiyun.com/wodwl/article/details/7794366

本文介绍了如何使用AJAX实现登录页面的密码输入验证，并通过AJAX与服务器进行交互，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<script type="text/javascript">
	function check(str) {
		var msg=document.getElementById("check1");
		if(str=="")
			msg.innerHTML="密码不能为空";
		else
			msg.innerHTML="<img src=\"/img/e.jpg\">";
			
			
	}
	function showHint(str) {
		var xmlhttp;
		if (str.length == 0) {
			document.getElementById("txtHint").innerHTML = "";
			return;
		}
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET", "/g305/jsp/index.do", true);
		xmlhttp.send();
	}
</script>
</head>
<body>

<form action="/jsp/index.do" method="post">
	<p>username:<input type="text" name="username" οnblur="check(this.value)"><span id="check1"><img id="img1" src="/img/r.jpg" align="middle"></span></p>
	<p>username:<input type="text" name="password" οnblur="check(this.value)"><span id="check2"><img id="img1" src="/img/r.jpg" align="middle"></span></p>
	<input type="submit" value="提交" >
</form>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">function valid()
 {var username=document.getElementById("username");var password=document.getElementById("password");var flag=true;if(username.value==""){alert("username not null");flag=false;}else if(password.value==""){alert("password not null");flag=false;}return flag;}</script></head><body><form
 action="/g305/jsp/index.do" id="myform" οnsubmit="return valid()"><label for="username">username:</label><input type="text" name="username"><br><label for="password">password</label><input type="password" name="password"><br><input type="submit" value="按钮"
 ></form></body></html>



 
使用AJAX