js实现简易表单验证与全选功能

js实现简易表单验证与全选功能

---

---

一.表单验证

1.body

<div id="d1">
			<form action="#" method="post">
				用户名:<input type="text" placeholder="请输入用户名:" onfocus="Mover()" onblur="Mblur(this.value)"/><span id="s1"></span><br />
				密码:&emsp;<input type="password" placeholder="请输入密码:" onfocus="pwd2()" onblur="Hpwd2(this.value)"/><span id="s2"></span>
				<br/><input type="submit" value="提交"/>
			</form>
		
		</div> 

2.js

<script>
		function Mover(){
			var s1=document.getElementById('s1');
			s1.innerHTML="用户名长度不能小于3位,大于8位!";
		}
		function Mblur(tet){
			
			if(tet.length>3 && tet.length<8){
				var s2=document.getElementById('s1');
				s2.innerHTML="<a style='color: green;font-size: 20px;'>√</a>";
			}else{
				var s3=document.getElementById('s1');
				s3.innerHTML="<a style='color: red;font-size: 20px;'>用户名格式不正确!!</a>";
			}
		}
		
		function pwd2(){
			var s2=document.getElementById('s2');
			s2.innerHTML="密码长度不能小于3位,大于8位!";
		}
		
		function Hpwd2(pwd){
			
			if(pwd.length>3 && pwd.length<8){
				var s2=document.getElementById('s2');
				s2.innerHTML="<a style='color: green;font-size: 20px;'>√</a>";
			}else{
				var s3=document.getElementById('s2');
				s3.innerHTML="<a style='color: red;font-size: 20px;'>密码格式不正确!!</a>";
			}
		}
	</script>

---

二.全选功能

1.body

<table>
			<tr>
				<td><input type="checkbox" name="c1" onclick="pd()"/></td>
				<td><input type="checkbox" name="c1" onclick="pd()"/></td>
				<td><input type="checkbox" name="c1" οnclick="pd()"/</td>
			</tr>
			<tr>
				全选<input type="checkbox" id="c2" onclick="fun1(0)"/>
				全不选<input type="checkbox" id="c3" onclick="fun1(1)"/>
			</tr>
		</table>

2.js

<script>
			
			function a1(a1){
				var a=document.getElementsByName('c1');
				if(a1){
					for(i=0;i<a.length;i++){
						a[i].checked=a1;
					}
					var b=document.getElementById('c3').checked=false;
				}else{
					for(i=0;i<a.length;i++){
						a[i].checked=a1;
					}
					var b=document.getElementById('c2').checked=false;
				}
			}
			function fun1(aa){
				var a=document.getElementsByName('c1');
				if(aa==0){	
					a1(true);
				}else{
					
					a1(false);
				}
				
			}
			function pd(){
				var q1=0;
				var q=0;
				var q2=document.getElementsByName('c1');
				for(i=0;i<q2.length;i++){
					if(q2[i].checked){
						q1+=1;
					}else{
						q+=1;
					}
				}
				if(q1==q2.length){
					var b=document.getElementById('c2').checked=true;
					var b=document.getElementById('c3').checked=false;
				}else{
					var b=document.getElementById('c2').checked=false;
				}
				if(q==q2.length){
					var b=document.getElementById('c3').checked=true;
					var b=document.getElementById('c2').checked=false;

				}else{
					var b=document.getElementById('c3').checked=false;
				}
			}
		</script>

---

三.小结

本章使用JavaScript实现了表单验证和全选功能,其练习目的在于函数的调用.
有哪里不足或者有更好的建议,欢迎留言吐槽,有哪里不懂的小伙伴可以私信我,我会一一回复,感谢认可,感谢支持!