JavaScript中表单代码模型-----验证提交的密码

最新推荐文章于 2024-07-23 14:51:29 发布

不揽瓷器活的金刚钻

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量118

点赞数

文章标签： css js html

本文链接：https://blog.csdn.net/qq_42284554/article/details/109050698

版权

前言

一、验证密码的代码模型

1.HTML部分的代码

<body>
	请输入密码:<input type="password" name="password" id="password" class="init" onblur="valiPasswordDate()" ><span id=passwordMsg></span><br>
    再输入密码:<input type="password" name="confirm" id="confirm" class="init" onblur="valiConfirmDate()"><span id=confirmMsg></span>
</body>

2.css样式表

.init{
		background:#ccc;
		border:1px #000 solid;
	}
	.right{
		background:#ccc;
		border:1px #0f0 solid;
	}
	.wrong{
		background:#ccc;
		border:1px #f00 solid;
	}

3.JavaScript部分的代码

function valiEmpty(classId){
		var obj = document.getElementById(classId);
		var objMsg = document.getElementById(classId+"Msg")
		if(obj.value != ""){
			obj.className = "right";
			objMsg.innerHTML = "<font color = 'green'>输入正确</font>";
			return true;
		}else{
			obj.className = "wrong";
			objMsg.innerHTML = "<font color = 'red'>输入错误</font>";
			return false;
		}
	}
	function valiDateRepeat(srcId,desId){
		var srcObj = document.getElementById(srcId);
		var desObj= document.getElementById(desId);
		var desMsg = document.getElementById(desId+"Msg")
		if(srcObj.value == desObj.value){
			desObj.className = "right";
			desMsg.innerHTML = "<font color = 'green'>输入正确</font>";
			return true;
		}else{
			desObj.className = "wrong";
			desMsg.innerHTML = "<font color = 'red'>两次输入不一致</font>";
			return false;
		}	
	}
	function valiPasswordDate(){
		return valiEmpty("password");
	}
	function valiConfirmDate(){
		if(valiEmpty("confirm")){
			return valiDateRepeat("password","confirm");		
		}
		return false;	
	}

不揽瓷器活的金刚钻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中表单代码模型-----验证提交的密码

前言一、验证密码的代码模型1.HTML部分的代码<body> 请输入密码:<input type="password" name="password" id="password" class="init" onblur="valiPasswordDate()" ><span id=passwordMsg></span><br> 再输入密码:<input type="password" name="confirm" id="co
复制链接

扫一扫