JS——文本框验证

spfLinux

于 2017-10-27 19:14:54 发布

阅读量2.1k

点赞数

分类专栏： js 文章标签： JS 输入框验证

本文链接：https://blog.csdn.net/spfLinux/article/details/78368121

版权

js 专栏收录该内容

137 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<span>用户名称：</span>
	<input type="text" id="uname" οnfοcus="unameTip1()" οnblur="unameTip2()">
	<span id="uname_tip"></span><br/>

	<span>用户密码：</span>
	<input type="password" id="upwd" οnfοcus="upwdTip1()" οnblur="upwdTip2()">
	<span id="upwd_tip"></span><br/>

	<span>重复密码：</span>
	<input type="password" id="cpwd" οnblur="cpwdTip()">
	<span id="cpwd_tip"></span>

	<script>
		//1、文本框获取焦点时，提示，用户名称6-18位
		//2、文本框失去焦点时，判断，用户名称是否为空并给出相应提示(用户名不能为空/通过)
		//3、upwd获取焦点时，提示，密码6-18位
		//4、upwd失去焦点时，判断，密码是否为空并给出提示(参考文本框提示)
		//5、cpwd失去焦点时，判断 cpwd的值是否与 upwd的值一致，并给出提示(通过/两次密码输入不一致)
		function $(id) {
			return document.getElementById(id);
		}

		function unameTip1() {
			$("uname_tip").innerHTML = "用户名称6-18位";
		}

		function unameTip2() {
			if($("uname").value == "") {
				$("uname_tip").innerHTML = "用户名不能为空";
			}else{
				$("uname_tip").innerHTML = "通过";
			}
		}

		function upwdTip1() {
			$("upwd_tip").innerHTML = "密码6-18位";
		}

		function upwdTip2() {
			if($("upwd").value == "") {
				$("upwd_tip").innerHTML = "密码不能为空";
			}else{
				$("upwd_tip").innerHTML = "通过";
			}
		}

		function cpwdTip() {
			if($("cpwd").value == "") {
				$("cpwd_tip").innerHTML = "不能为空";
			}else if(($("upwd").value !== $("cpwd").value)) {
				$("cpwd_tip").innerHTML = "两次密码输入不一致";
			}else{
				$("cpwd_tip").innerHTML = "通过";
			}
		}


	</script>
</body>
</html>

spfLinux

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS——文本框验证

Document 用户名称：用户密码：重复密码： //1、文本框获取焦点时，提示，用户名称6-18位 //2、文本框失去焦点时，判断，用户名称是否为空并给出相应提示(用户名不能为空/通过) //3、upwd获取焦点时，提示，密码6-18位 //4、upwd失去焦点时，判断，密码是否为空并给出提示(参考文本框提示) //5、cpwd
复制链接

扫一扫

专栏目录