初学JavaScript第八天

最新推荐文章于 2024-07-22 15:13:59 发布

এ᭄༊空旧黎梦ღꦿ࿐

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量53

点赞数

分类专栏：初学者JavaScript 文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/weixin_70675726/article/details/127095001

版权

初学者JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript事件的注册

在JavaScript中注册事件通常使用下面两种方法。

<1>将事件绑定到页面元素的属性

<2>将事件绑定到对象的属性

JavaScript中常用的事件

JavaScript中基本的事件模型
事件

onblur   元素失去焦点后
onchange   元素值发生改变且已失去焦点后
onclick   鼠标在元素上单击时
ondblclick   鼠标在元素上双击时
onfocus   元素获得焦点
onkeydown   键盘上某个键被按下时
onkeypress   键盘上某个键被按下并且释放时
onkeyup   键盘上某个键被弹起时
onload   对象装载完毕时
onmousedown   在元素上按下鼠标时
onmousemove   在元素上移动鼠标指针时
onmouseout   鼠标指针移除元素时
onmouseover   鼠标指针移动到元素上方时
onmouseup   在元素上释放鼠标时
onreset   表单被重置时
onselect   文本内容被选择时
onsubmit   表单被提交时
onunload   对象被卸载时

例题：

<script type="text/javascript">
        function checkUname(){
            var reg =/^[a-zA-Z]{6,}$/
            var username=document.getElementById("uname").value
            if(reg.test(username)){
            document.getElementById("msg1").innerHTML="用户名格式正确"
            return true
            }else{
            document.getElementById("msg1").innerHTML="用户名格式不正确"    
            return false
            }
        }
        //密码和确认密码格式都必须由数字，字母下滑线组成且长度必须在六位以上
        function checkPwd(n){
            var pwd1 =document.getElementById("pwd1").value
            var pwd2 =document.getElementById("pwd2").value
            var reg=/^\w{6,}$/
            if(n==1){
                if(reg.test(pwd1)){
                document.getElementById("msg2").innerHTML="密码格式正确"
                return true 
            }else{
                document.getElementById("msg2").innerHTML="密码格式不正确"
                return false
            }
            
        }else{
            if(reg.test(pwd2)){
                document.getElementById("msg3").innerHTML="确认密码格式正确"
                return true 
            }else{
                document.getElementById("msg3").innerHTML="确认密码格式不正确"
                return false
            }
          }
        }
        //用来判断密码和确认密码是否一致
        function checkEquals(){
            var pwd1 =document.getElementById("pwd1").value
            var pwd2 =document.getElementById("pwd2").value
            //验证确认密码的格式是否正确
            if(checkPwd(2)){
                if(pwd1==pwd2){
                    document.getElementById("msg3").innerHTML="密码与确认密码格式一致"
                    return true     
                }else{
                    document.getElementById("msg3").innerHTML="密码与确认密码格式不一致"
                    return false
                
                }
            }
        }
    </script>

表单元素下拉列

value   被选中项的value值
length   下拉选项的个数
selectedlndex   选中项的索引，可以修改选中项
options   所有下拉选项的数组
onblur   下拉列表失去焦点时触发
onfocus   下拉列表获得焦点时触发
onchange   选项发生改变时触发

城市下拉列表框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr>
				<td>账户：</td>
				<td>
					<input type="text" name="uname" id="uname" value="" onblur="checkUname()" />
				</td>
				<td>
					<label id="msg1"></label>
				</td>
			</tr>
			<tr>
				<td>密码：</td>
				<td>
					<input type="password" name="pwd1" id="pwd1" value="" onblur="checkPwd(1)" />
				</td>
				<td>
					<label id="msg2"></label>
				</td>
			</tr>
			<tr>
				<td>确认密码：</td>
				<td>
					<input type="password" name="pwd2" id="pwd2" value="" onblur="checkEquals()" />
				</td>
				<td>
					<label id="msg3"></label>
				</td>
			</tr>
			<tr>
				<td>家庭住址：</td>
				<td>
					<select name="province" id="province" onchange="changeOpt()">
						<option value="请选择省份">--请选择省份--</option>
						<option value="河南省">--河南省--</option>
						<option value="四川省">--四川省--</option>
						<select>
							<select name="cities" id="cities">
							<option value="请选择城市">--请选择城市--</option>
						<select>
				</td>
				<td>

				</td>
			</tr>
			<tr>
				<td colspan="3" align="center">
					<input type="button" id="btn" value="提交" />
				</td>
			</tr>
		</table>
		<div id="result">

		</div>
		<script type="text/javascript">
			//验证用户名格式
			function checkUname(){
				var username=uname.value
				var reg=/^[a-zA-Z_]_{6,}$/
				if(!reg.test(username)){
					msg1.innerHTML="用户名格式不正确"
					return false
				}else {
					msg1.innerHTML="用户名格式正确"
					return false
				}
			}
			
			//密码和确认没密码格式都必须式由数字、字母、下划线组成，且长度必须在6位以上
			function checkPwd(n){
				var pwd1= document.getElementById("pwd1").value
				var pwd2= document.getElementById("pwd2").value
				var reg=/^w{6，}$/
				if(n==1){
					if (reg.test(pwd1)) {
						document.getElementById("masg2").innerHTML="密码格式正确"
						return true
					} else{
						document.getElementById("masg2").innerHTML="密码格式不正确"
						return false
					}
				}else{
					if (reg.test(pwd2)) {
						document.getElementById("masg3").innerHTML="确认密码格式正确"
						return true
					} else{
						document.getElementById("masg3").innerHTML="确认密码格式不正确"
						return false
					}
				}
			}
			
			//用来判断密码和确认密码是否一致
			function checkEquals(){
				var pwd1= document.getElementById("pwd1").value
				var pwd2= document.getElementById("pwd2").value
				//验证确认密码的格式是否正确
				if(checkPwd(2)){
					if(pwd1==pwd2){
						document.getElementById("masg2").innerHTML="密码和确认密码一致"
						return true
					} else{
						document.getElementById("masg3").innerHTML="密码和确认密码不一致"
						return false
					}
				}
			}
			
			//下拉列表
			function changeOpt(){
				var cityList = new Array();
				cityList['请选择省份'] = ['--请选择城市--'];
				cityList['河南省'] = ['郑州','开封','洛阳','商丘','焦作'];
				cityList['四川省'] = ['成都','锦阳','德阳','自贡','泸州'];
				
				//获取选中的下拉列表选项（省份）
				var province=document.getElementById("province").value
				console.log(province)
				//将下拉列表清空
				document.getElementById("cities").options.length=0
				for (var i = 0; i < cityList[province].length; i++) {
					var opt=new Option(cityList[province][i],cityList[province][i])
					document.getElementById("cities").options.add(opt)
				}
			}
		</script>

	</body>
</html>