表单提交笔记

最新推荐文章于 2024-09-21 09:30:15 发布

꧁“杂货店”꧂

最新推荐文章于 2024-09-21 09:30:15 发布

阅读量146

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_45287575/article/details/105521226

版权

第一次写表单

1.表单验证 2020/4/13
用户名不能为空
用户名必须在6~14之间
用户名只能有数字和字母组成,不能包含其他字符
密码和确定密码一致,邮箱地址合法
统一失去焦点
错误提示信息统一在span便签提示,并要求字体12号,红色
文本框再次获得焦点,清空错误提示信息,如果文本框中数据不合法要求清空文本框value
最终表单中所用项均合法方可提交

不行了,不行了,把以前学过的Javascript知识点都运行上了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交</title>
		<script type="text/javascript">
			window.onload = function(){
				var aa = /^\s*$/;
				window.onsubmit = checksubmit;
				
				// 获取对象
				function d(id){
					return document.getElementById(id);
				}
				
				
				// 检查空值
				function isnull(obj1,obj2){
					var var1 = obj1;
					var var2 = obj2;
					if(aa.test(var1.value)){
					obj2.innerText = "*不能为空";
					
						return false;
					}
					if(checknumber(var1,var2) == false){
						return false;
					}
					if(checkinput(var1,var2) == false){
						return false;
					}
					return true;
				}
				// 检查输入个数
				function checknumber(obj1,obj2){
					var a = obj1.value;
					a = a.trim(a)
					if(!(a.length >= 6 && a.length <= 14)){
						obj2.innerText = "个数必须大于6位小于14位";
						return false;
					}
					return true;
				}
				// 检查输入
				function checkinput(obj1,obj2){
				 var var1 = obj1.value;
				var aa = /^[A-Za-z0-9]*$/;
				if(!aa.test(var1)){
					obj2.innerText="用户名只能是字母和数字组成"
					return false;
				}
				return true;
				}
				//重新获取焦点就清空
				function checkfous(obj1,obj2){
				   obj1.onfocus = function(){obj2.innerText = "";}
				}
				function checkemil(obj1,obj2){
					var a = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
					var b = obj1.value;
					if(b != ""){
						
						if(!a.test(obj1.value)){
						   obj2.innerText = "邮箱格式错误";
						   return false;
						}
					}else{
						obj2.innerText = "邮箱不能为空";
						return false;
					}
					
				}
				// 判断value是否相等
				function checksame(obj1,obj2,obj3,obj4){
					if(obj1.value != ""){
						if(!(obj1.value === obj2.value)){
						  obj4.innerText = "两次密码不一致";
						  return false;
						}
					}else{
						obj3.innerText = "密码不能为空";
					}
					
					return true;
				}
				// 清楚两个
				function checksubmit(){
					var select1 = isnull(d("id1"),d("id11")); // 判断是否为空
					var select2 = checkemil(d("id4"),d("id44"));//判断邮箱格式
					var select3 = checksame(d("id2"),d("id3"),d("id22"),d("id33")); // 判断两个标签alue是否相等
					checkfous(d("id1"),d("id11"));
					checkfous(d("id2"),d("id22"))
					checkfous(d("id3"),d("id33"))
					checkfous(d("id4"),d("id44"))
					
					if(select1 == false || select2 == false || select3 == false){ d("form").action="javascript:void(0)";
					   
					}else{
						alert("表单提交中!...");
					}
				}
				document.getElementById("reset").onclick = function(){ // 成功实现功能
					checkfous(d("id1"),d("id11"))
					d("id11").innerText="";
					checkfous(d("id2"),d("id22"))
					d("id22").innerText="";
					checkfous(d("id3"),d("id33"))
					d("id33").innerText="";
					checkfous(d("id4"),d("id44"))
					d("id44").innerText="";
					
					}
			}
		</script>
		<style type="text/css">
			span{
				color:red;
				font: 12;
			}
		</style>
	</head>
	<body>
		<form  method="post" id="form" action="">
		<pre>
		  用户名:<input type="text" id="id1"><span id="id11"></span>
		 密   码:<input type="password" id="id2"/><span id="id22"></span>
		确定密码:<input type="password" id = "id3"><span id="id33"></span>
		 邮   箱:<input type="text" id="id4"/> <span id="id44"></span>
		<input type="submit" value="提交" id="submit">     <input type="reset" value="重置" id="reset">
		</pre>
		</form>
		
	</body>
</html>