JavaScript学习（4）—— 获取输入框的内容

最新推荐文章于 2023-11-01 17:59:04 发布

Yacht13

最新推荐文章于 2023-11-01 17:59:04 发布

阅读量4.9k

点赞数 5

分类专栏： HTML、CSS、JavaScript、jQuery 文章标签： JavaScript

本文链接：https://blog.csdn.net/Archer__13/article/details/124831260

版权

HTML、CSS、JavaScript、jQuery 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

一. getElementById

获取一个值

获取输入框的内容，然后判断该内容是否满足正则表达式

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		function onclickFun(){
			//获取标签对象
			var usernameObject = document.getElementById("username");  //通过id属性获取标签对象
			
			//获取输入框的文本内容
			var usernametext = usernameObject.value;   
			
			//验证字符串是否满足某个规则，使用正则表达式
			var patt = /^\w{5,12}$/;       //必须由字母或数字或下划线组成，且长度为5-12位
			
			
			var usernameSpanObj = document.getElementById("usernameSpan");
			
			if (patt.test(usernametext)){
				usernameSpanObj.innerHTML = "用户名合法";    //浏览器会在span标签处输出该内容（可以是文本或图片）
			}else{
				usernameSpanObj.innerHTML = "用户名不合法";
			}
		}
  </script>
</head>
<body>
	
	用户名：<input type="text" id="username"> 
	<span id="usernameSpan"></span>   </br>
	<button onclick = "onclickFun()">校验</button>
	
</body>
</html>

二. getElementsByName

获取多个值，根据指定的name属性查询返回多个标签对象集合

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		function checkAll(){
			var hobbies = document.getElementsByName("hobby");
			alert(hobbies[0].value +  hobbies[1].value + hobbies[2].value)
			
			for(var i = 0; i < hobbies.length; i++){
				hobbies[i].checked = true;
			}
		}
		
		function checkNull(){
			var hobbies = document.getElementsByName("hobby");
			for(var i = 0; i < hobbies.length; i++){
				hobbies[i].checked = false;
			}
		}
  </script>
</head>
<body>
	
	爱好：<input type = "checkbox" name = "hobby" value= "Java"/>Java   
		  <input type = "checkbox" name = "hobby" value= "Python"/>Python 
		  <input type = "checkbox" name = "hobby" value= "C++"/>C++ <br/>

	<button onclick="checkAll()">全选</button>
	<button onclick="checkNull()">全不选</button>
</body>
</html>

三. getElementsByTagName

按照指定标签名进行查询并返回集合

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
		function checkAll(){
			var inputs = document.getElementsByTagName("input");
			alert(inputs[0].value +  inputs[1].value + inputs[2].value)
			
			for(var i = 0; i < inputs.length; i++){
				inputs[i].checked = true;
			}
		}
		
		function checkNull(){
			var inputs = document.getElementsByTagName("input");
			alert(inputs[0].value +  inputs[1].value + inputs[2].value)
			
			for(var i = 0; i < inputs.length; i++){
				inputs[i].checked = false;
			}
		}
  </script>
</head>
<body>
	
	爱好：<input type = "checkbox" value= "Java"/>Java   
		  <input type = "checkbox" value= "Python"/>Python 
		  <input type = "checkbox" value= "C++"/>C++ <br/>

	<button onclick="checkAll()">全选</button>
	<button onclick="checkNull()">全不选</button>
</body>
</html>

Yacht13

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习（4）—— 获取输入框的内容

获取输入框的内容，然后判断该内容是否满足正则表达式<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function onclickFun(){ //获取标签对象 var nameObject = document.getElementById("name"
复制链接

扫一扫