JS学习小结(三)_js获取user和pwd的value-优快云博客

本文链接：https://blog.youkuaiyun.com/ls_wifi/article/details/102556601

本文总结了JavaScript中正则表达式的两种创建方式，详细解释了flags参数的含义，如g（全局匹配）、i（忽略大小写）和m（多行搜索）。接着介绍了正则表达式对象的test()方法用于验证用户输入，以及在表单验证中的应用。最后提到了复选框的全选和取消全选功能，以及如何获取下拉列表选中项的value。

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

怎么创建正则表达式对象，怎么调用正则表达式对象的方法？

第一种创建方式： var regExp=/正则表达式/flags;

第二种创建方式： var regExp=new RegExp("正则表达式","flags");

关于flags:

g:全局匹配

i:忽略大小写

m:多行搜索(ES规范制定之后才支持m)

当前面是正则表达式的时候，m不能用。只有前面是普通字符串的时候，m才可以使用。

2.正则表达式对象的test()方法？

true/false=正则表达式对象.test(用户填写的字符串);

3.表单验证:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
		<style type="text/css">
			span{
			  color: red;
			  font-size:12px;
			} 
			
		</style>
	</head>
	<body>
		<script type="text/javascript">
			//给用户名文本框绑定blur事件
			window.onload=function(){
				var usernameErrorSpan=document.getElementById("usernameError");
				var usernameElt=document.getElementById("username");
				usernameElt.onblur=function(){
					//获取用户名
					var username=usernameElt.value;
					//去除前后空白
					username=username.trim();
					//判断用户名是否为空
					if(username.length==0){
				        //用户名为空
						usernameErrorSpan.innerText="用户名不能为空";
					}else{			
						//用户名不为空
						//继续判断长度[6-14]
						if(username.length<6||username.length>14){
							//用户名长度非法
							usernameErrorSpan.innerText="用户名长度必须在[6-14]之间";
						}else{
							//用户名长度合法
							//继续判断是否含有特殊符号
							var regExp=/^[A-Za-z0-9]+$/;
							var ok=regExp.test(username);
							if(ok){
								//用户名最终合法
							}else{
								//用户名中含有特殊符号
								usernameErrorSpan.innerText="用户名只能由数字和字母组成";
							}
						}
					}
				} 
				//给username这个文本框绑定获得焦点事件
				usernameElt.onfocus=function(){
					//清空非法的value
					if(usernameErrorSpan.innerText!=""){
						usernameElt.value="";
					}
					//清空span
					usernameErrorSpan.innerText="";
				}
				//获取密码错误提示的span标签
				var pwdErrorSpan=document.getElementById("pwdError");
				//获取确认密码框对象
				var userpwd2Elt=document.getElementById("userpwd2");
				//绑定blur事件
				userpwd2Elt.onblur=function(){
				//获取密码和确认密码
				var userpwdElt=document.getElementById("userpwd");
				var userpwd=userpwdElt.value;
				var userpwd2=userpwd2Elt.value;
				if(userpwd!=userpwd2){
					//密码不一致
					pwdErrorSpan.innerText="密码不一致";
				}else{
					//密码一致
				  }
				}
				//绑定focus事件
				userpwd2Elt.onfocus=function(){
					if(pwdErrorSpan.innerText!=""){
						userpwd2Elt.value="";
				}
				pwdErrorSpan.innerText="";
			}
			//获取email的span
			var emailSpan=document.getElementById("emailError");
			//给email绑定blur事件
			var emailElt=document.getElementById("email");
			emailElt.onblur=function(){
				//获取email
				var email=emailElt.value;
				//编写email的正则
				var emailRegExp=/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;
				var ok=emailRegExp.test(email);
				if(ok){
					//合法
				}else{
					//不合法
					emailSpan.innerText="邮箱地址不合法";
				}
			}
			//给emailElt绑定onfocus
			emailElt.onfocus=function(){
				if(emailSpan.innerText!=""){
					emailElt.value="";
				}
				emailSpan.innerText="";
			}
			 //给提交按钮绑定鼠标单击事件
			 var submitBtnElt=document.getElementById("submitBtn");
			 submitBtnElt.onclick=function(){
				 //触发username的blur userpwd2的blur email的blur
				 //不需要人工操作,使用纯JS代码触发事件
				 usernameElt.focus()
				 usernameElt.blur();
				 
				 userpwd2Elt.focus()
				 userpwd2Elt.blur();
				 
				 emailElt.focus()
				 emailElt.blur();
				 //当所有表单项都是合法的时候,提交表单
				 if(usernameErrorSpan.innerText==""&&pwdErrorSpan.innerText==""&&emailSpan.innerText==""){
					 //获取表单对象
					 var userFormElt=document.getElementById("userForm");
					 //可以在这里设置action,也可以不在这里.
					 userFormElt.action="http://localhost:8080/jd/save";
					 //提交表单
					 userFormElt.submit();
				 }
			 }
			}
		</script>
		
		<!-- 这个表单提交应该使用POST，这里为了检测，所以使用get -->
		
		<form id="userForm" method="get">
			用户名<input type="text" name="username" id="username"/><span id="usernameError"></span><br>
			密码<input type="text" name="userpwd" id="userpwd" /><br>
			确认密码<input type="text" id="userpwd2" /><span id="pwdError"></span><br>
			邮箱<input type="text" name="email" id="email" /><span id="emailError"></span><br>
			<input type="button" value="注册"id="submitBtn"/>
			<input type="reset" value="重置" />
		</form>
	</body>
</html>

4.复选框的全选和取消全选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复选框的全选和取消全选</title>
	</head>
	<body>
		<script type="text/javascript">
		window.onload=function(){
			var aihaos=document.getElementsByName("aihao");
			var firstChk=document.getElementById("firstChk");
			firstChk.onclick=function(){
			 
			 for(var i=0;i<aihaos.length;i++){
				 aihaos[i].checked=firstChk.checked;
			 }
			}
			//对以上数组进行遍历
			 var all=aihaos.length;
			 for(var i=0;i<aihaos.length;i++){
				 aihaos[i].onclick=function(){
					  var checkCount=0;
					//总数量和选中的数量相等的时候,第一个复选框选中.
					  for(var i=0;i<aihaos.length;i++){
						   if(aihaos[i].checked){
							   checkCount++;
						   }
						  }
						  firstChk.checked=(all==checkCount);
						/* if(all==checkCount){
							 firstChk.checked=true;
						 }else{
							 firstChk.checked=false;
						 } */
				 }
			}
			
		}	
			
	</script>
	<input type="checkbox" id="firstChk" /><br>
	<input type="checkbox" name="aihao" value="smoke" />抽烟<br>
	<input type="checkbox" name="aihao" value="drink" />喝酒<br>
	<input type="checkbox" name="aihao" value="tt" />烫头<br>
	</body>
</html>

5.获取下拉列表选中项的value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取下拉列表选中项的value</title>
	</head>
	<body>
		<select onchange="alert(this.value)">
			<option>--请选择省份--</option>
			<option value="001">河北省</option>
			<option value="002">河南省</option>
			<option value="003">山东省</option>
			<option value="004">山西省</option>
		</select>
	</body>
</html>