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