2017-12-01 表单验证

最新推荐文章于 2022-08-05 14:53:01 发布

iris w

最新推荐文章于 2022-08-05 14:53:01 发布

阅读量157

点赞数

分类专栏：第一个月html css js jq

本文链接：https://blog.csdn.net/qq_39509597/article/details/78857938

版权

第一个月html css js jq 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
</head>
<script type="text/javascript">
	function check(){
		var check = shuru1()&&shuru2()&&shuru3()&&shuru4();
		return check;
	}
	
	
	//姓名
	function shuru1(){
		var check = false;
		var s1 = document.getElementById("abc1");
		var o1 = s1.value;
		var ts1 = document.getElementById("ts1");
	
		if(o1.length>5||o1.length==0){
			//alert("输入名字不能大于5个");
			ts1.innerHTML="*名字不能大于5个字符以及名字不能为空";
			check = false;
		}else{
				ts1.innerHTML="";
			check = true;
			}
		return check;
	}	
	//姓氏
		function shuru2(){
			var check = false;
		var s2 = document.getElementById("abc2");	
		var o2 = s2.value;
		var ts2 = document.getElementById("ts2");
		if(o2.length>5||o2.length==0){	
		//	alert("输入姓氏不能大于5个");
			ts2.innerHTML="*输入姓氏不能大于5个以及不能为空";
			check = false;
		}else{
				ts2.innerHTML="";
				return true;
			}
			return check;
	}	
	//用户名
		function shuru3(){
			var check = false;
			var s3 = document.getElementById("abc3");
			var o3 = s3.value;
		
			if(o3.length<6||o3.length>20||o3.length==0){
			//	alert("用户名必须在6-20字符之内");
			ts3.innerHTML="*用户名必须在6-20字符之内且不能为空";
			return false;
			
			}else if(isNaN(o3)==false){
			//	alert("用户名不能为纯数字");
		ts3.innerHTML="*用户名不能为纯数字";
			return false;
			}else{
				ts3.innerHTML="";
				return true;
			}
			return check;
		}
	
	
	//第一次输入密码
	//密码不能为空且必须是数字和字母的混合
	
		function shuru4(type){
			var check = false;
			var s4_1 = document.getElementById("abc4_1");
			var o4_1 = s4_1.value;
			
			if(o4_1.length<6||o4_1.length>30){
				//alert("密码必须在6-30个字符之内");
				ts4.innerHTML="*用密码必须在6-30字符之内";
				return false;
				
			}else if(o4_1.length>=6&&o4_1.length<=30){
				if(isNaN(o4_1)==false){
					//alert("密码不能为纯数字");
					ts4.innerHTML="*密码不能为纯数字";
				
				}else if
					(o4_1.indexOf('1')==-1&&o4_1.indexOf('2')==-1&&o4_1.indexOf('3')==-1&&o4_1.indexOf('4')==-1&&o4_1.indexOf('5')==-1&&o4_1.indexOf('6')==-1&&o4_1.indexOf('7')==-1&&o4_1.indexOf('8')==-1&&o4_1.indexOf('9')==-1&&o4_1.indexOf('0')==-1&&o4_1.indexOf('`')==-1&&o4_1.indexOf('~')==-1&&o4_1.indexOf('!')==-1&&o4_1.indexOf('@')==-1&&o4_1.indexOf('#')==-1&&o4_1.indexOf('$')==-1&&o4_1.indexOf('%')==-1&&o4_1.indexOf('^')==-1&&o4_1.indexOf('&')==-1&&o4_1.indexOf('*')==-1&&o4_1.indexOf('(')==-1&&o4_1.indexOf(')')==-1&&o4_1.indexOf('-')==-1&&o4_1.indexOf('_')==-1&&o4_1.indexOf('=')==-1&&o4_1.indexOf('+')==-1&&o4_1.indexOf('[')==-1&&o4_1.indexOf(']')==-1&&o4_1.indexOf('|')==-1&&o4_1.indexOf('{')==-1&&o4_1.indexOf('}')==-1&&o4_1.indexOf('/')==-1&&o4_1.indexOf('?')==-1&&o4_1.indexOf('.')==-1&&o4_1.indexOf(',')==-1&&o4_1.indexOf('<')==-1&&o4_1.indexOf('>')==-1&&o4_1.indexOf(';')==-1&&o4_1.indexOf(':')==-1){
					//alert("用户名不能为纯英文");
					
						ts4.innerHTML="*密码不能为纯英文";
						return false;
				}else{
				
					ts4.innerHTML="";
					return true;
				}
				
				
			}
			return check;
		}	
	
	
	//第二次输入密码
			function shuru5(){
				var a =document.getElementById("abc4_1").value;
				var s4_2 = document.getElementById("abc4_2");
			var o4_2 = s4_2.value;
				
				
				if(a==o4_2){
					
				}else{
					alert("两次密码不一致");
				}
				
			}
			

	
	//邮箱地址
	function shuru6(){
		var s6 = document.getElementById("abc6");
		var o6 = s6.value;
		
		if(o6.length==0){
			alert("邮箱地址不能为空");
		}else if(o6.indexOf('@')==-1){
			alert("您输入的邮箱格式有误");
		}else if(o6.indexOf('.com')==-1){
			alert("您输入的邮箱格式有缺失");
		}
	}
	
	//出生日期
	function shuru7(){
		var s7 = document.getElementById("abc7");
		var o7 = s7.value;
	
		
		if(o7.length==0){
			alert("请输入年份");
		}else if(isNaN(o7)==true){
			alert("您的输入有误");
			s7.value ="";
		}else if(o7<1900||o7>2017){
			alert("您输入的年份有误");
			s7.value ="";
		}
	}
	
	
	
	function shuru8(){
		var s8_1 =document.getElementsByTagName("option");
		
		
		var s8 = document.getElementById("abc8");
		var o8 = s8.value;
		alert(o8);
		
		switch(s8_1.value){
			case '1':
				if(o8<1&&o8>31){
					alert("您输入的日期有误");
				}else{
					
				}
				break;
			case '3':
					if(o8<1&&o8>31){
					alert("您输入的日期有误");
				}else{
					
				}
				break;
		}
	}
	
	</script>
	
	
<!--onSubmit是form特有的事件
onSubmit="return js方法()",
根据方法返回true/false来决定表单是否提交-->
	
<body>
	<form action="zidongxianxian.html" method="post" οnsubmit="return check()">
		<table border="1px">
			<tr>
				<td >名字：</td>
				<td colspan="2"><input type="text" value="" name="" id="abc1" onBlur="shuru1()">
				<span id="ts1" style="color: red;font-size: 10px;"></span></td>
			</tr>
			
			<tr>
				<td>姓氏：</td>
				<td colspan="2"><input type="text" value="" name="" id="abc2" onBlur="shuru2()">
				<span id="ts2" style="color: red;font-size: 10px;"></span></td>
			</tr>
			
			<tr>
				<td>登录名：</td>
				<td><input type="text" value="" name="" id="abc3" onBlur="shuru3()">
				<span id="ts3" style="color: red;font-size: 10px;"></span></td>
				<td>（可包含a-z、0-9和下划线）</td>
			</tr>
			
			<tr>
				<td>密码：</td>
				<td><input type="password" value="" name="" id="abc4_1" onBlur="shuru4()"><span id="ts4" style="color: red;font-size: 10px;"></span></td>
				<td>至少包含6个字符</td>
			</tr>
			
			<tr>
				<td>再次输入密码：</td>
				<td colspan="2"><input type="password" value="" name="" id="abc4_2" onBlur="shuru5()"></td>
			</tr>
			
			<tr>
				<td>电子邮箱：</td>
				<td><input type="email" value="" name="" id="abc6" onBlur="shuru6()"></td>
				<td>（必须包含@字符）</td>
			</tr>
			
			<tr>
				<td>性别：</td>
				<td colspan="2"><input type="radio" checked value="" name="123"><img src="../images/Male.gif">男
				<input type="radio" value="" name="123"><img src="../images/Female.gif">女</td>
			</tr>
			
			<tr>
				<td>头像：</td>
				<td colspan="2"><input type="file" value="" style="border: 1px black solid;width: 200px"></td>
			</tr>
			
			<tr>
				<td>爱好：</td>
				<td><input type="checkbox" value="" name="">运动<input type="checkbox" value="" name="">聊天<input type="checkbox" value="" name="">玩游戏</td>
			</tr>
			
			<tr>
				<td>出生日期：</td>
				<td colspan="2"><input type="text" value="yyyy" name=""  style="width: 30px" id="abc7" onBlur="shuru7()">年
				<select value="">
					<option>[选择月份]</option>
					<option value="1" >1</option>
					<option>2</option>
					<option value="1" >3</option>
					<option>4</option>
					<option value="1">5</option>
					<option>6</option>
					<option value="1" >7</option>
					<option value="1" >8</option>
					<option>9</option>
					<option value="1">10</option>
					<option>11</option>
					<option value="1" >12</option>
				</select>月
				<input type="text" value="dd" name="" style="width: 15px" id="abc8" onBlur="shuru8()">日
				</td>
			</tr>
			
			<tr>
			<td colspan="3" align="center"><input type="submit" value="" style="width: 80px;height: 34px; background-image: url(../images/submit.gif) ">
			
				<input type="reset" value="" style="width: 80px;height: 34px; background-image: url(../images/reset.gif)"> </td>
			</tr>
				
		</table>
			
	</form>



</body>
</html>

时间原因后面有几个没验证，不过大致就是这样子。

iris w

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2017-12-01 表单验证

表单验证 function check(){ var check = shuru1()&&shuru2()&&shuru3()&&shuru4(); return check; } //姓名 function shuru1(){ var check = false; var s1 = document.getElementById("abc1"); var
复制链接

扫一扫