JavaScrip一些笔记和表单验证例子

最新推荐文章于 2024-05-01 00:02:34 发布

CastleLv

最新推荐文章于 2024-05-01 00:02:34 发布

阅读量352

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/jiaze999/article/details/123353249

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		span{
			color: red;
			font-size: 12px;
		}		
	</style>	
</head>
<body>
	<!--嵌入JavaScrip的第一种方式
	<input type="button" value="hello" onclick="alert('JavaScrip')"/>
	<input type="button" value="hello" onclick='alert("JavaScrip？");alert("JavaScrip!")'/>
	-->
	
	<!--嵌入JavaScrip的第二种方式 脚本块 自上而下执行 位置不受限制
	<script type="text/javascript">
		alert('JavaScrip')
	</script>
	-->
	
	<!--嵌入JavaScrip的第三种方式 引入外部js文件
	<script type="/text/javascript" src="js文件路径"></script>
	-->	
	
	<!--JavaScrip变量
		var i = 100;
		//一个变量没var声明 他都是全局变量
	-->
	
	<!--JavaScrip函数
		第一种
		function 函数名(形参){
			函数体;
		}
		
		<script>
			function sum(a,b){
				alert(a + b);
			}
			sum(10,20);
		</script>
		
		第二种
		函数名 = function(形参){
			函数体;
		}
		
		<script>
			sum = function(a,b){
				alert(a + b);
			}
			sum(10,20);
		</script>
	-->
	
	<!--
	alert("abcdefg".substr(2,4));//cdef
	substr(startIndex,length)开始位置的元素，包含开始位置元素+长度
	alert("abcdefg".substring(2,4));//cd
	substring(startIndex,endIndex);包含开始位置的元素，但是不包含结束位置的元素
	-->
	
	
	<!--
		NaN underfined null三个值有什么区别
		alert(typeof null); //object
		alert(typeof NaN); //number
		alert(typeof underfined);//underfined
		null和underfined 等同
		==等同只判断值是否相等 ===全等判断值又判断数据类型
	-->
	
	
	<script type="text/javascript">
		window.onload = function(){
			//给用户文本框绑定blur事件
			//获取span标签
			var usernameerrorSpan = document.getElementById("usernameerror");
			var usernameElt = document.getElementById("username");
			usernameElt.onblur = function(){
			//获取用户名
			var username = usernameElt.value;
			//去除空白
			username = username.trim();
			if(username === ""){
				usernameerrorSpan.innerText = "用户名不能为空";
			}else{
				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(){
				if(usernameerrorSpan.innerText != ""){
					usernameElt.value = "";
				}
				usernameerrorSpan.innerText = "";
			}
			var passworderrorSpan = document.getElementById("password2error");
			var password2Elt = document.getElementById("password2");
			password2Elt.onblur = function(){
				var passwordElt = document.getElementById("password");
				var password = passwordElt.value;
				var password2 = password2Elt.value;
				if(password != password2){
					passworderrorSpan.innerText = "密码不一致";
				}else{
					
				}
			}
			password2Elt.onfocus = function(){
				if(passworderrorSpan.innerText != ""){
					password2Elt.value = "";
				}
				passworderrorSpan.innerText = "";
			}
			var emailSpan = document.getElementById("emailerror");
			var emailElt = document.getElementById("email");
			emailElt.onblur = function(){
				var email = emailElt.value;
				var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				var ok = emailRegExp.test(email);
				if(ok){
					
				}else{
					emailSpan.innerText = "邮箱地址不合法";
				}
			}
			emailElt.onfocus = function(){
				if(emailSpan.innerText != ""){
					emailElt.value = "";
				}
				
				emailSpan.innerText = "";
			}
			var BtnElt = document.getElementById("Btn");
			Btn.onclick = function(){
				//使用纯JS代码触发事件
				usernameElt.focus();
				usernameElt.blur();
				password2Elt.focus();
				password2Elt.blur();
				emailElt.focus();  
				emailElt.blur();
				if(usernameerrorSpan.innerText == "" && passworderrorSpan.innerText == "" && emailSpan.innerText == ""){
					var userFormElt = document.getElementById("userForm");
					userFormElt.submit();
				}
			}
		}	
	</script>
	<form id="userForm" action="http://localhost:8080/jd/save" method="get">
		用户名<input type="text" name="username" id="username" /><span id="usernameerror"></span><br />
		密码<input type="text" name="password" id="password" /><br />
		确认密码<input type="text" id="password2" /><span id="password2error"></span><br />
		邮箱<input type="text" name="email" id="email" /><span id="emailerror"></span><br />
		<input type="button" value="注册" id="Btn" />
		<input type="reset" value="重置" />
	</form>	
</body>
</html>

CastleLv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScrip一些笔记和表单验证例子

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> span{ color: red; font-size: 12px; } </style> </head><body> <!--嵌入JavaScrip的第一种方式
复制链接

扫一扫