✽js的快速入门3 表单验证

目录

 1. 验证用户名

2. 验证密码

3. 验证确认密码

4.验证手机号与邮箱

5. 验证籍贯

6.验证爱好

7.验证验证码

        1> 生成验证码

        2> 比对验证码

8.验证同意条例

9. 验证所有表单

10.整体代码

先用HTML写一个表单【用户名，密码，确认密码，手机号，邮箱，性别，籍贯，验证码】

【均是简单的验证，仅为了展示】

 1. 验证用户名

 设置id用来获取该框内的值

设置onblur 当该输入框失去焦点后执行checkname函数

后面的span设置id，为其赋值

function checkname() {
			//1、获取输入框内容,获取span对象 2、创建校验规则 3、开始校验 4、输出校验结果
			var uname = document.getElementById('uname').value;
			var span = document.getElementById('nameid');

			var reg = /^[\u4e00-\u9fa5]{2,4}$/ //匹配2-4个汉字

			if (uname == '' || uname == null) {
				span.innerHTML = '不能为空';
				span.style.color = 'red';
				return false;
			} else if (reg.test(uname)) {
				span.innerHTML = '用户名符合要求';
				span.style.color = 'green';
				return true;
			} else {
				span.innerHTML = '用名长度为2-4个汉字';
				span.style.color = 'red';
				return false;
			}
		}

 先获取了输入框内的输入内容

获取span对象

设置正则表达式【匹配2-4个汉字】reg.test()是正则表达式中的函数，符合的返回ture

进入if 先判断用户输入是否为空，为空则更改span的内容与样式

当输入的汉字数量过多或过少时，执行else更改span，符合数量时表示通过，例如绿色的小对勾

2. 验证密码

密码也是相同的操作

function checkpwd1() {
			var pwd1 = document.getElementById('pwd1').value;
			var span = document.getElementById('pwdid');

			var reg = /^[a-z]\w{5,7}$/;

			if (pwd1 == '' || pwd1 == null) {
				span.innerHTML = '密码不能为空';
				span.style.color = 'red';
				return false;
			} else if (reg.test(pwd1)) {
				span.innerHTML = '密码符合要求';
				span.style.color = 'green';
				return true;
			} else {
				span.innerHTML = '密码太简单或者不满足（6-8）位';
				span.style.color = 'red';
				return false;
			}
		}

3. 验证确认密码

仅仅只是将上一步的校验密码改为比对密码

function checkpwd2() {
			var pwd1 = document.getElementById('pwd1').value;
			var pwd2 = document.getElementById('pwd2').value;
			var span = document.getElementById('rpwdid');

			if(pwd2 == '' || pwd2 == null){
				span.innerHTML = '密码不能为空';
				span.style.color = 'red';
				return false;
			}else if (pwd1 == pwd2) {
				span.innerHTML = '密码一致';
				span.style.color = 'green';
				return true;
			} else {
				span.innerHTML = '密码不一致';
				span.style.color = 'red';
				return false;
			}
		}

4.验证手机号与邮箱

还记得类吗，封装这个函数，验证姓名密码手机号的时候对其进行调用，省去一部分代码

传参（要获取内容的id，span的id，验证格式，错误信息）

将span的id写成input框的id+'id'，省去span的id参数，

给input加上alt属性，可以通过获取的input对象[.]获取alt，替换错误信息

要传递的参数就变成了2个，同验证用户名一模一样【返回去更改用户名的校验】

function test(idname, reg) {//用alt代替str
			var info = document.getElementById(idname);
			var va = info.value;
			var alt = info.alt;
			var span = document.getElementById(idname + 'id');

			if (va == '' || va == null) {
				span.innerHTML = alt + '不能为空';
				span.style.color = 'red';
				return false;
			} else if (reg.test(va)) {
				span.innerHTML = alt + '符合要求';
				span.style.color = 'green';
				return true;
			} else {
				span.innerHTML = alt + '错误';
				span.style.color = 'red';
				return false;
			}
		}

手机号与邮箱的html

传入参数即可 

function checkphone() {
			var reg = /^1[3,4,5,7,8]\d{9}$/;
			return test('phone', reg);
		}

function checkemail() {
			var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+.com$/
			return test('email', reg);
		}

5. 验证籍贯

除了value为0的情况下，选择那个都是可以的

为下拉菜单设置失去焦点事件不合理，只要点击鼠标进行滑动均为失去焦点，所以添加值改变事件

	
---请选择---
						陕西省
						山西省
						河南省
					
					

 下拉菜单获取的value是在html中设置的，

使用if仅需判断value是否是0即可

function check_box(){
			var sel=document.getElementById('address').value;
			console.log(sel);
			var span=document.getElementById('addressid');
			if(sel != 0){
				span.innerHTML =  '符合要求';
				span.style.color = 'green';
				return true;
			}else{
				span.innerHTML =  '不符合要求';
				span.style.color = 'red';
				return false;
			}
		}

6.验证爱好

注意爱好这里使用的不是id是name，name是以数组的形式存储

LOL
睡觉
听歌
看电影
打游戏

checked：当该框被选择时返回ture，反之为false【console.log()一下】

当所有多选框均执行过后还是没有ture，则span报错【实现至少选择一项的功能】

function checkhobby(){
			var favs=document.getElementsByName('ho');
			var span=document.getElementById('hobbyid');
			for(var i=0;i

7.验证验证码

.t {
			display: inline-block;
			width: 80px;
			height: 35px;
			line-height: 35px;
			text-align: center;
			background-color: blue;
			border-radius: 10px;
			color: #fff;
			cursor: pointer;
		}

        1> 生成验证码

             使用Math.random()生成一个随机的0-1的小数，对小数进行*9000+1000的操作【防止0.00...的出现】,在对其进行向下取整

function createcode() {
			var code = Math.floor(Math.random() * 9000 + 1000);
			var span = document.getElementById('code');
			span.innerHTML = code;
			console.log(span);

        2> 比对验证码

        将用户输入的内容与span中的内容进行比对，一致则通过，不一致刷新验证码

function checkcode(){
			var span=document.getElementById('code').innerText;
			var inp=document.getElementById('mycode').value;
			var span2=document.getElementById('testcode');
			
			if(span == inp){
				span2.innerHTML='验证码通过';
				span2.style.color='green';
				return true;
			}else{
				span2.innerHTML='验证码不一致';
				span2.style.color='red';
				createcode();
				return false;
			}
		}

8.验证同意条例

同意的条例

当该框没有选择时，注册按钮为灰色

当勾选为真时，disabled的属性为假，则失去该属性的效果

function checkagree(){
			document.getElementById('sub').disabled=!document.getElementById('agree').checked;
		}

9. 验证所有表单

只有上面还不够，勾过之后直接提交也是可以通过的

 使用上一节事件的阻断来阻断没有填写就能提交的bug

先执行所有的验证函数【函数中的return是为这里做铺垫】，在返回所有函数的"且"值，checksubmit接收到的值在返回给form，从而形成阻断

function checksubmit(){
			checkname();
			checkpwd1();
			checkpwd2();
			checkphone();
			checkemail();
			check_box();
			checkhobby();
			checkcode();
			return checkname()&&checkpwd1()&&checkpwd2()&&checkphone()&&checkemail()&&check_box()&&checkhobby()&&checkcode();
		}

10.整体代码

	
	
	
	
	



	
	
		

			

				
用户名：
				

					
					
				
			
			

				
密码：
				

					
					
				
			
			

				
确认密码：
				

					
					
				
			
			

				
手机号：
				

					
			
			

				
邮箱：
				

					
					
				
			
			

				
性别:
				

					男
					女
					
				
			
			

				
籍贯：
				

					
						---请选择---
						陕西省
						山西省
						河南省
					
					
				
			
			

				
爱好：
				

					LOL
					睡觉
					听歌
					看电影
					打游戏
					
				
			
			

				
验证码：
				

					
					
					
				
			
			

				

					同意的条例

				
			
			

				

					

				
			
	
	

下节 对table的操作