js注册案例

最新推荐文章于 2024-07-03 23:56:01 发布

要膨胀的爆米花

最新推荐文章于 2024-07-03 23:56:01 发布

阅读量125

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_44229136/article/details/103375931

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.borderGreen{border: 2px solid green;}
			.colorGreen{color: green;}
			.borderRed{border: 2px solid red;}
			.colorRed{color: red;}
		</style>
	</head>
	<body>
		 <p>
			 <span>手机号</span>
			 <input type="text" class="userNameInput">
			 <span class="userNameSpan"></span>
		 </p>
		  <p>
		 	 <span>密码</span>
			 <input type="text" class="passwordInput">
 			 <span class="passwordSpan"></span>
		 </p>
		 <button disabled>提交</button>
		<script>
			var userNameInput=document.querySelector('.userNameInput');
			var userNameSpan=document.querySelector('.userNameSpan');
			var passwordInput=document.querySelector('.passwordInput');
			var passwordSpan=document.querySelector('.passwordSpan');
			var button=document.querySelector('button');
			function checkIfSuccess(){
				if(userNameSpan.innerHTML=='正确'&&passwordSpan.innerHTML=='正确'){
					//删除disable属性
					button.removeAttribute('disabled');
				}else{
					//添加disable属性
					button.addAttribute('disabled','disabled');
				}
				
			}
			userNameInput.onblur=function(){
				var userName=userNameInput.value;
				if(userName.length==11){
					userNameInput.setAttribute('class','borderGreen');
					userNameSpan.innerHTML='正确';
					userNameSpan.setAttribute('class','colorGreen');
				}else{
					userNameInput.setAttribute('class','borderRed');
					userNameSpan.innerHTML='请输入正确的手机号码';
					userNameSpan.setAttribute('class','colorRed');
				}
				checkIfSuccess();
				// if(userNameSpan.innerHTML=='正确'){
				// 	//删除disable属性
				// 	button.removeAttribute('disabled');
				// }else{
				// 	//添加disable属性
				// 	button.addAttribute('disabled','disabled');
				// }
			}
			passwordInput.onblur=function(){
				var password=passwordInput.value;
				if(password.length>6&&password.length<12){
					passwordInput.setAttribute('class','borderGreen');
					passwordSpan.setAttribute('class','colorGreen');
					passwordSpan.innerHTML='正确';
				}else{
					passwordInput.setAttribute('class','borderRed');
					passwordSpan.setAttribute('class','colorRed');
					passwordSpan.innerHTML='不正确';
				}
				checkIfSuccess();
				// if(passwordSpan.innerHTML=='正确'){
				// 	//删除disable属性
				// 	button.removeAttribute('disabled');
				// }else{
				// 	//添加disable属性
				// 	button.addAttribute('disabled','disabled');
				// }
			}
		</script>
	</body>
</html>

要膨胀的爆米花

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js注册案例

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .borderGreen{border: 2px solid green;} .colorGreen{color: green;} ...
复制链接

扫一扫