js_表单校验

最新推荐文章于 2024-02-22 18:23:22 发布

A夏小小

最新推荐文章于 2024-02-22 18:23:22 发布

阅读量86

点赞数

文章标签： js表单校验

本文链接：https://blog.csdn.net/weixin_42371832/article/details/100021212

版权

效果图：

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			#reg{
				font-size: 20px;
				color: black;
			}
			.ok{
				color: green;
			}
			.erro{
				color: red;
			}
			
		</style>
	</head>
	<body>
		
		<div id="reg">注册</div>
		<form action="#" method="get" id="form1" onsubmit="return submit1()">
			
			<p><input type="text" name="username" id="username" placeholder="用户名"/>
			<span id="usernametip"></span><br /> </p>
			
			<p><input type="text" name="tel" id="tel" placeholder="手机号"/>
			<span id="usertel"></span><br /> </p>
			
			<p><input type="password" name="pwd" id="pwd" placeholder="设置密码" />
			<span id="pwdtip"></span><br /></p>
			
			<p><input type="password" name="xpwd" id="xpwd" placeholder="确认密码" />
			<span id="xpwdtip"></span><br /></p>
			
			<input type="button" value="注册" onclick="validate()" />
		</form>
		
		
		<script>
				
				
			var uaername = document.getElementById("username");
			var usernametip = document.getElementById("usernametip");

			username.onblur = function(){
				if(/\w{4,16}/.test(this.value)){
					usernametip.innerHTML="通过";
					usernametip.className="ok";
					
				}else{
					usernametip.innerHTML="用户名4-16位";
					usernametip.className="erro" ;
					this.value="";
				}
			};
			 
			
			var tel =document.getElementById("tel");
			var usertel =document.getElementById("usertel");
			tel.onblur = function(){
				if(/^\d{11}$/.test(this.value)){
					usertel.innerHTML="通过";
					usertel.className="ok";
					
				}else{
					usertel.innerHTML="必须为11数字";
					usertel.className="erro" ;
					this.value="";
				}
			}; 
				
			var pwd =document.getElementById("pwd");
			var pwdtip =document.getElementById("pwdtip");
			pwd.onblur = function(){
				if(/^[a-zA-Z0-9]{6,16}$/.test(this.value)){
					pwdtip.innerHTML="通过";
					pwdtip.className="ok";
					
				}else{
					pwdtip.innerHTML="密码必须为字母开头且数字结尾";
					pwdtip.className="erro" ;
					this.value="";
					
				}
			};
				
			var xpwd =document.getElementById("xpwd");
			var xpwdtip =document.getElementById("xpwdtip");
			xpwd.onblur = function(){
				if(pwd.value==(this.value)&&this.value.length){
					xpwdtip.innerHTML="通过";
					xpwdtip.className="ok";
					
				}else{
					xpwdtip.innerHTML="密码不一致";
					xpwdtip.className="erro" ;
					this.value="";
					
				}
			};
			var form1=document.form1;
			function submit1(){
				return false;
			};
					
			function validate(){
				if(username.value.length&&tel.value.length&&pwd.value.length&&xpwd.value.length){
						
					alert("注册成功");
						
				}else{
					alert("请完成上述要填写的信息");
				} 
			}
			
			
		</script>
	</body>
</html>

A夏小小

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js_表单校验

效果图：源代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #reg{ font-size: 20px; col...
复制链接

扫一扫