表单验证

最新推荐文章于 2024-04-16 11:57:14 发布

青沐沐

最新推荐文章于 2024-04-16 11:57:14 发布

阅读量161

点赞数

分类专栏：前端文章标签：表单验证用户登录 css+html

本文链接：https://blog.csdn.net/wulianwangxuchenqi/article/details/78462220

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel ="stylesheet" type = "text/css" href = "" />
  <style type = "text/css"></style>
  <script type = "text/javascript">
    //实例：表单验证
	function focus_username(){
		//获取id=result_username的元素对象
		var divObj = document.getElementById("result_username");
		//写入提示信息
		divObj.innerHTML="请输入你的用户名";
		divObj.style.color="#ccc";
	}
	function focus_userpwd(){
		//获取id=result_userpwd的元素对象
		var divObj = document.getElementById("result_userpwd");
		//写入提示信息
		divObj.innerHTML="请输入你的密码";
		divObj.style.color="#ccc";
	}
	function blur_username(){
		//获取id=result_username和name=username的元素对象；
		var divObj=document.getElementById("result_username");
		var inputObj = document.form1.username;
		//用户名验证
		if(inputObj.value==""){
			divObj.innerHTML="对不起，用户名不能为空!";
			divObj.style.color="red";
			return false;
		}else if(inputObj.value.length<5||inputObj.value.length>20){
			divObj.innerHTML="用户名长度必须介于5-20个字符之间!"
			divObj.style.color="red";
			return false;
		}else{
			divObj.innerHTML="<img src='ok.gif' />";
			return true;
		}
	}
	function blur_userpwd(){
		//获取id=result_userpwd和name=userpwd的元素对象；
		var divObj=document.getElementById("result_userpwd");
		var inputObj = document.form1.userpwd;
		//用户名验证
		if(inputObj.value==""){
			divObj.innerHTML="对不起，密码不能为空!";
			divObj.style.color="red";
			return false;
		}else if(inputObj.value.length<5||inputObj.value.length>20){
			divObj.innerHTML="密码长度必须介于5-20个字符之间!"
			divObj.style.color="red";
			return false;
		}else{
			divObj.innerHTML="<img src='ok.gif' />";
			return true;
		}
	}

	function checkForm(){
		var flag_username=blur_username();
		var flag_uesrpwd=blur_userpwd();
		if(flag_username && flag_userpwd){
			//提交表单
			return true;
		}else{
			//阻止表单提交
			return false;
		}
	}
  </script>
 </head>

 <body>
  <form name="form1" method="post" action="login.php" οnsubmit="return checkForm()">
  <table width="500" align="center" border="1" rules="all" cellpadding="5">
	<tr bgcolor="#f0f0f0"><th colspan="3">用户登录</th></tr>
	<tr>
		<td width="80" align="right">用户名</td>
		<td><input type="text" name="username" οnfοcus="focus_username()" οnblur="blur_username()" /></td>
		<td width="300"><div id="result_username"></div></td>
	</tr>
	<tr>
		<td width="80" align="right">密码</td>
		<td><input type="password" name="userpwd" οnfοcus="focus_userpwd()" οnblur="blur_userpwd()" /></td>
		<td><div id="result_userpwd"></div></td>
	</tr>
	<tr>
	<td> </td>
	<td colspan="2"><input type="submit" value="提交表单"></td>
	
	</tr>
  </table>
  </form>
 </body>
</html>

青沐沐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单验证

new document //实例：表单验证 function focus_username(){ //获取id=result_username的元素对象 var divObj = document.getElementById("result_username"); //写入提示信息 divObj.innerHTML="
复制链接

扫一扫

专栏目录