使用JavaScript进行表单必填项目验证和改进

最新推荐文章于 2023-11-26 16:30:52 发布

Bird

最新推荐文章于 2023-11-26 16:30:52 发布

阅读量9.9k

点赞数 2

分类专栏： JavaScript 文章标签： javascript function input action

本文链接：https://blog.csdn.net/a352193394/article/details/7375231

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在网页提交表单的呃时候，往往需要进行表单的必填项进行验证，下面我们以两个例子来写一下对表单的必填项进行

认证的两个例子，第二个例子是对第一个例子进行的改进。

首先是最基本的最简单的表单必填项的实例代码

<!DOCTYPE html>
<html>
  <head>
    <title>确认表单必填项完整性</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript">
    	
    	function $(str){
    		return (document.getElementById(str));
    	}
    	
    	function check_submit(){
    		if($("username").value ==""){
    			alert("请填写用户名!");
    			return false;
    		}
    		if($("password").value == ""){
    			alert("请填写密码!");
    			return false;
    		}
    	}
    </script>
    
  </head>
  
  <body>
    <form action="" οnsubmit="return check_submit();">
    	用户名:<input id="username" type="text"><br/>
    	密　码:<input id="password" type="password"><br/>
    	<input type="submit" value="提交">
    </form>
  </body>
</html>

下面是对表单的验证进行了改进

<!DOCTYPE html>
<html>
  <head>
    <title>更加人性化表单</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   	
   	<script type="text/javascript">
   	
   		function $(str){
   			return (document.getElementById(str));
   		}
   		
   		function check_submit(){
   			if($("username").value =="" || $("username").value=="请输入用户名"){
   				alert("用户名不能为空!");
   				return false;
   			}
   			if($("password").value ==""){
   				alert("密码不能为空！");
   				return false;
   			}
   		}
   		
   		function mover(){
   			event.srcElement.focus();
   			event.srcElement.select();
   		}
   		
   		function mclick(){
   			if(event.srcElement.value=="请输入用户名")
   				event.srcElement.value="";
   		}
   		
   		function mblur(){
   			if(event.srcElement.value=="")
   				event.srcElement.value="请输入用户名";
   		}
   	</script> 
  
  </head>
  
  <body>
    <form action="" οnsubmit="return check_submit();">
    	用户名:<input id="username" type="text" οnmοuseοver="mover();" οnclick="mclick();" 
    	οnblur="mblur();" value="请输入用户名"><br/>
    	密　码:<input id="password" type="password" οnmοuseοver="mover();"><br/>
    	<input type="submit" value="提交" id="submit">
    		
    </form>
  </body>
</html>

当表单的用户名输入框鼠标划过的时候，触发事件，然后自动选中事件，当失去焦点的时候，检测里面的值是否为

空，如果为空就返回原来的值。应该说是比较大的改进。