62-js-表单验证及多选框

最新推荐文章于 2023-03-04 19:07:58 发布

ystraw_ah

最新推荐文章于 2023-03-04 19:07:58 发布

阅读量289

点赞数

分类专栏： javaweb 文章标签： js

本文链接：https://blog.csdn.net/qq_39451578/article/details/99655829

版权

javaweb 专栏收录该内容

65 篇文章 1 订阅

订阅专栏

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Lesson1</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	<style type="text/css">
		.info{font-size: 5px; color: red;}
	</style>
	
	<script type="text/javascript">
		// 检查中账号内容是否合法
		function checkAccount(){
			var account=document.getElementById("account").value.trim();
			if(account == ""){
				document.getElementById("account1").innerHTML = "账号不能为空";				
				document.getElementById("account1").className = "infor";		
				return false;
			}
			else{
				if(account.length>=7){
					console.log(account.substring(0,6));
					return false
				}
				else{
					document.getElementById("account1").innerHTML = "长度不够！";				
					document.getElementById("account1").className = "infor";	
					return false;
				}
			}
		}
		
		
		function check(){
			if(checkAccount()){
				
				return true;
			}
			else{
				return false;
			}
			
		}
	</script>
	
	
  </head>
  
  <body>
    This is my JSP page. <br> 
    
    <!-- 有序表 -->
    <ol type = "A">
    	<li>one</li>
    	<li>one</li>
    	<li>one</li>
    </ol>
    
    <!--  表格 跨行 -->
    <table border="3" width="600px" height="100px">
    	<tr><td rowspan="2">1</td><td>2</td><td>3</td><td>4</td></tr>
    	<tr> <td colspan="3">7</td></tr>
    </table>
    
    <form action="" method = "get" onsubmit="return check();">
	    <table>
	    	<tr><td>账号：</td> <td><input type="text" id="account" name="account" onblur="checkAccount();"></td> 
	    		<td><span id = "account1">请输入账号</span></td> 
	    	</tr>
	    	<tr>
	    		<td><input type="submit"></td>
	    	</tr>
	    </table>
	</form>    
    
    
  </body>
</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">
		// 全选控制
		function check(){
			var box=document.getElementsByName("ids"); // 取到元素节点信息
			if(box[0].checked){
				for(var i = 1; i < box.length; i++){
					box[i].checked = true;
				}
				document.getElementById("btn").disabled="";
			}
			else{
				for(var i = 1; i < box.length; i++){
					box[i].checked = false;
				}
				document.getElementById("btn").disabled="disabled";
			}
		}
		
		// 单选控制
		function check1(){
			var box=document.getElementsByName("ids"); // 取到元素节点信息
			var str = false;
			for(var i = 1; i < box.length; i++){
				if(box[i].checked == false){
					str = true; // 至少有一个没选
					break;
				}
			}
			//alert(str);
			if(str){
				box[0].checked = false;
				document.getElementById("btn").disabled="disabled";
			}
			else{
				box[0].checked = true;
				document.getElementById("btn").disabled="";
			}
			// 单独判断是否有一个元素被选中的状态
			var str1 = false;
			for(var i = 1; i < box.length; i++){
				str1 = true;
				break;
			}
			//alert(str1);
			if(str1){
				document.getElementById("btn").disabled="";
			}
			else{
				document.getElementById("btn").disabled="disabled";
			}
		}
		// 执行删除元素
		function del(){
			var box=document.getElementsByName("ids"); // 取到元素节点信息
			var ids="";
			for(var i = 1; i < box.length; i++){
				if(box[i].checked){
					ids += box[i].value+",";
				}
			}
			if(ids == ""){
				alert("请选择需要删除的对象！");
				document.getElementById("btn").disabled="disabled";
				return false;
			}
			if(confirm('你确定要删除'+ids+'的数据吗？')){
				//执行删除
				alert(ids);
			}
			else{
				alert('取消了删除！');
			}
		}
	
	</script>
	
	
  </head>
  
  <body>
    <table width="400" height="100" border="2">
    	<tr><td><input type="checkbox" name="ids" onclick="check();"></td><td>姓名</td></tr>
    	<tr><td><input type="checkbox" name="ids" value="1" onclick="check1();"></td><td>姓名1</td></tr>
    	<tr><td><input type="checkbox" name="ids" value="2" onclick="check1();"></td><td>姓名2</td></tr>
    	<tr><td><input type="checkbox" name="ids" value="3" onclick="check1();"></td><td>姓名3</td></tr>
   		<tr><td colspan="2"><input type="button" value="删除" onclick="del();" id = "btn" disabled="disabled"></td></tr>
    </table>
  </body>
</html>

ystraw_ah

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
62-js-表单验证及多选框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>Lesson1</title> <meta...
复制链接

扫一扫