HTML+CSS+JS的表单(欢迎吐槽&借鉴)

首先是html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>( HTML+CSS+JS )_form</title>
	</head>
	<link rel="stylesheet" href="css/new_file.css"/>
	<script type="text/javascript" src="js/new_file.js"></script>
	<body>
		<form onsubmit="return on_submit()">
			<input	id="U_name" class="var"	type="text" placeholder="用户名"	onfocus="on_name()" onblur="out_name()"/>
			<var	id="name_prompt"></var>
			
			<input	id="U_pswd" class="var" type="text" placeholder="密码"	onfocus="on_pswd()" onblur="out_pswd()"/>
			<var	id="pswd_prompt"></var>
			
			<input	id="submit" type="submit" value="注册"/>
		</form>
	</body>
</html>

其次是css: 

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-size: 16px;
}

body{
	background-color: gray;
}

form{
	width: 350px;
	margin: auto;				
	margin-top: 20%;
}

form input,var{					/*后代选择器*/
	width: 250px;				/*“定宽” 与 “margin: auto;” 一同使用使块级元素水平方向居中*/
	margin: auto;
}

input{
	display: block;
	height: 40px;
	border: 1px solid black;
	border-radius: 8px;
	padding-left:10px ;			/*输入框内提示字符与左边框的距离*/
	outline: none;				/*去除被点击后的默认边框*/
}

.var:focus{						/*伪类选择器,获焦时*/
	border-color: blue;			
}

form var{						/*起初提示部分<var>内无值,所以需要盒子撑起来*/
	display: block;
	min-height: 30px;			/*设置最小高值避免提示文字覆盖密码输入框*/
	padding: 5px 0 10px 10px;
	font-size: 0.5em;
	color: red;
}

#submit{
	border: none;				/*去除按钮的默认边框*/
	background-color: dodgerblue;
}

最后是js:

//观前须知:
//	1、JavaScript操作html的方法:
//		通过匹配ID、类、标签名等得到html对象(html标签),进而操作之。
//	2、正则表达式:描述了一种字符串匹配的模式。
//	3、函数test():返回一个boolean值,以判断字符串是否与该正则相匹配
//		test()用法:正则表达式.test(字符串)。


//定义一个变量RegExp(字母开头,允许5-16字节,允许字母数字下划线)
var RegExp = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/; 

//用户名输入框提示函数(获焦触发)
 function on_name(){
	//得到ID属性为U_name的对象
	var username = document.getElementById("U_name");
	//得到ID属性为name_prompt的对象
	var name_prompt = document.getElementById("name_prompt");
	//如果字符串username匹配正则RegExp,则返回TRUE,否则为FALSE
	var result = RegExp.test(username.value);
	
	//判断用户名的值的长度是否为零(即是否有输入)
	if(username.value.length==0){
		//修改<var>标签的文本颜色属性
		name_prompt.style.color = 'yellow';
		//修改<var>标签的文本(非法)
		name_prompt.innerHTML = "字母开头<br />允许5-16字节<br />字母数字下划线";
	}
	//如果用户名的值的长度不为零(即是有输入)且与该正则匹配的结果为真
	if(username.value.length!=0&&result==true){
		//修改<var>标签的文本
		name_prompt.innerHTML = "";
	}
}
 
//用户名输入框提示函数(失焦触发)
function out_name(){
	//得到ID属性为U_name的对象
	var username = document.getElementById("U_name");
	//得到一个ID属性为name_prompt的对象
	var name_prompt = document.getElementById("name_prompt");
	//判断字符串username是否与正则RegExp相匹配
	var result = RegExp.test(username.value);
	
	//如果字符串username长度为零(即无输入,非法)
	if (username.value.length==0){
		//修改<input>标签的边框颜色属性
		username.style.borderColor = 'red';
		//修改<var>标签的文本颜色属性
		name_prompt.style.color = 'red';
		//修改<var>标签的文本
		name_prompt.innerHTML = "用户名不可以为空哦~";
	}
	//如果字符串username与正则RegExp不相匹配(用户名非法)
	if(result==false){
		//修改<input>标签的边框颜色属性
		username.style.borderColor = 'red';
		//修改<var>标签的文本颜色属性
		name_prompt.style.color = 'red';
		//修改<var>标签的文本
		name_prompt.innerHTML = "用户名格式错误~";
	}
	//如果用户名合法
	if(result==true){
		//修改<input>标签的边框颜色属性
		username.style.borderColor = 'blue';
		//修改<var>标签的文本
		name_prompt.innerHTML="";
	}
}


//密码输入框提示函数(获焦触发)
 function on_pswd(){
	//得到ID属性为U_name的对象
	var password = document.getElementById("U_pswd");
	//得到ID属性为name_prompt的对象
	var pswd_prompt = document.getElementById("pswd_prompt");
	//如果字符串username匹配正则RegExp,则返回TRUE,否则为FALSE
	var result = RegExp.test(password.value);
	
	//判断用户名的值的长度是否为零(即是否有输入)
	if(password.value.length==0){
		//修改<var>标签的文本颜色属性
		pswd_prompt.style.color = 'yellow';
		//修改<var>标签的文本(非法)
		pswd_prompt.innerHTML = "字母开头<br />允许5-16字节<br />字母数字下划线";
	}
	//如果用户名的值的长度不为零(即是有输入)且与该正则匹配的结果为真
	if(password.value.length!=0&&result==true){
		//修改<var>标签的文本
		pswd_prompt.innerHTML = "";
	}
}
 
//密码输入框提示函数(失焦触发)
function out_pswd(){
	//得到ID属性为U_name的对象
	var password = document.getElementById("U_pswd");
	//得到一个ID属性为name_prompt的对象
	var pswd_prompt = document.getElementById("pswd_prompt");
	//判断字符串username是否与正则RegExp相匹配
	var result = RegExp.test(password.value);
	
	//如果字符串password长度为零(即无输入,非法)
	if (password.value.length==0){
		//修改<input>标签的边框颜色属性
		password.style.borderColor = 'red';
		//修改<var>标签的文本颜色属性
		pswd_prompt.style.color = 'red';
		//修改<var>标签的文本
		pswd_prompt.innerHTML = "密码不可以为空哦~";
	}
	//如果字符串password与正则RegExp不相匹配(密码非法)
	if(result==false){
		//修改<input>标签的边框颜色属性
		password.style.borderColor = 'red';
		//修改<var>标签的文本颜色属性
		pswd_prompt.style.color = 'red';
		//修改<var>标签的文本
		pswd_prompt.innerHTML = "密码格式错误~";
	}
	//如果密码合法
	if(result==true){
		//修改<input>标签的边框颜色属性
		password.style.borderColor = 'blue';
		//修改<var>标签的文本
		pswd_prompt.innerHTML="";
	}
}

//防止无输入提交、不合法输入,只输入账号/密码的清空
function on_submit(){
	//获取用户名、密码的值
	var username = document.getElementById("U_name").value;
	var password = document.getElementById("U_pswd").value;
	//如果用户名、密码的值与该正则表达式匹配则返回Ture,即允许函数执行:允许提交表单
	if(RegExp.test(username)&&RegExp.test(password)){
		return true;
	}else{
		return false;
	}
}

本人混子,大一摆烂,大二(现在)自学php,java,html,css,js,sql,一起加油吧!希望我做的这些能帮到你!此外,欢迎大佬指点,谢谢谢谢!!!


版权声明:本文为m0_63445979原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>