首页 > 其他分享 >js注册页面表单提交验证

js注册页面表单提交验证

时间:2023-03-29 18:56:50浏览次数:35  
标签:function code 表单 flag var js 页面

<script>
		var code = document.querySelector(".code")
		var flag = true
		code.onclick = function(){
			if(flag){
				flag = false
				var i=5
				//console.log("点击了")
				let timer= setInterval(function(){
					code.innerHTML = `倒计时0${i}秒`
					i--
					if(i<0){
						clearInterval(timer)
						code.innerHTML = `重新获取`
						flag = true
					}
				},1000)
			}
		}
		
		var inp = document.querySelector("[name='username']")
		
		inp.addEventListener("change",verifyName)
		function verifyName(){
			const spa = inp.nextElementSibling
			let reg = /^[a-zA-Z0-9_-]{6,10}$/
			if(!reg.test(inp.value)){
				spa.innerHTML = "用户名不合法"
				return false
			}else{
				spa.innerHTML = ""
				return true
			}
		}
		
		
		var phone = document.querySelector("[name='phone']")
		
		phone.addEventListener("change",verifyPhone)
		function verifyPhone(){
			const spa = phone.nextElementSibling
			let reg = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/
			if(!reg.test(phone.value)){
				spa.innerHTML = "手机号不合法"
				return false
			}else{
				spa.innerHTML = ""
				return true
			}
		}
		
		var codeInp = document.querySelector("[name='code']")
		
		codeInp.addEventListener("change",verifyCode)
		function verifyCode(){
			const spa = codeInp.nextElementSibling
			let reg = /^\d{6}$/
			if(!reg.test(codeInp.value)){
				spa.innerHTML = "验证码不合法"
				return false
			}else{
				spa.innerHTML = ""
				return true
			}
		}
		
		var pwd = document.querySelector("[name='password']")
		
		pwd.addEventListener("change",verifypwd)
		function verifypwd(){
			const spa = pwd.nextElementSibling
			let reg = /^(\w){6,20}$/
			if(!reg.test(pwd.value)){
				spa.innerHTML = "密码不合法"
				return false
			}else{
				spa.innerHTML = ""
				return true
			}
		}
		
		var confirm = document.querySelector("[name='confirm']")
		
		confirm.addEventListener("change",verifyconfirm)
		function verifyconfirm(){
			const spa = confirm.nextElementSibling
			
			if(confirm.value != pwd.value){
				spa.innerHTML = "两次密码不一致"
				return false
			}else{
				spa.innerHTML = ""
				return true
			}
		}
		
		var queren = document.querySelector(".icon-queren")
		
		queren.addEventListener("click",function(){
			this.classList.toggle("icon-queren2")
		})
		
		
		var form = document.querySelector("form")
		
		form.addEventListener("submit",function(e){
			if(!queren.classList.contains("icon-queren2")){
				alert("请勾选协议")
				e.preventDefault()
			}
			if(!verifyName()){
				e.preventDefault()
			}
			if(!verifyPhone()){
				e.preventDefault()
			}
			if(!verifyCode()){
				e.preventDefault()
			}
			if(!verifypwd()){
				e.preventDefault()
			}
			if(!verifyconfirm()){
				e.preventDefault()
			}
		})
  </script>

  

标签:function,code,表单,flag,var,js,页面
From: https://www.cnblogs.com/sgj191024/p/17269996.html

相关文章