DOM（三）-07-(示例-表单校验-涉及的事件和信息提示方式)

最新推荐文章于 2020-10-09 21:47:43 发布

wy_0928

最新推荐文章于 2020-10-09 21:47:43 发布

阅读量413

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47811055

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!--
表单校验-涉及的事件和信息提示方式

用户注册信息，提交到服务端之前需要对用户填写的信息进行校验，如果用户写的对，
就提交给服务端，否则不提交并出现提示信息。在客户端进行校验。
-->

<html>
	<head>
		<style type="text/css">
		</style>
	</head>
	<body>
		<script type="text/javascript">
		
			//校验用户名
			function checkUser(){
				
//alert("haha");
				var oUserNode = document.getElementsByName("user")[0];
//alert(oUserNode.value);
				var name = oUserNode.value;
				var oSpanNode = document.getElementById("userspan");
				if(name == "abc"){
				
					oSpanNode.innerHTML = "用户名正确".fontcolor("blue");//这里也可以传入“√”图片，即oSpanNode.innerHTML = "<img src='ok.jpg'/>"
				}else{
					
					oSpanNode.innerHTML = "用户名错误".fontcolor("red");
				}
			}
		
		</script>
		
		<form>
		
		<!--
		一般是当用户输入完名称，然后在输入密码时候开始校验名称信息，那么用什么事件校验？
		思路：
		光标定位在“用户名称”中不校验名称，光标离开“用户名称”或光标定位在“输入密码”中开始校验名称，
		所以用到onblur事件。
		
		（这个onblur是失去焦点事件，而onfocus正好相反，是获取焦点事件）
		-->
			用户名称：<input type="text" name="user" οnblur="checkUser()"/>
			<span id="userspan"></span>	<!-- 这里用span显示校验结果信息，不要用div，因为div后面自带换行 -->
			<br/>
			输入密码：<input type="text" name="psw" /><br/>
		</form>
	</body>
</html>

wy_0928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（三）-07-(示例-表单校验-涉及的事件和信息提示方式)

 //校验用户名 function checkUser(){ //alert("haha"); var oUserNode = docu
复制链接

扫一扫