JS 表单验证

最新推荐文章于 2024-04-20 14:59:10 发布

给我一瓶冰阔洛

最新推荐文章于 2024-04-20 14:59:10 发布

阅读量344

点赞数

分类专栏： js 文章标签： JS

本文链接：https://blog.csdn.net/qq_43035350/article/details/83009356

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>用户注册</title>
	<style>
			body,p,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd{
				margin: 0;
				padding: 0;
			}
			ul,ol{
				list-style: none;
			}
			a{
				color: #000;
				text-decoration: none;
			}
			body{
				font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
			}
			table{
				width: 100%;
				border-collapse: collapse;
				border-spacing: 0;
			}
			.clear:after{
				display: block;
				height: 0;
				content: '.';
				visibility: hidden;
				clear: both;
			}
			.clear{
				zoom:1;
			}
			#container{
				width: 90%;
				margin: 0 auto;
			}
			#container td{
				padding:10px;
				border:1px solid #ccc;
			}
			input{
				outline: none;
			}
			input.username,input.password,input.password2,input.verify{
				float:left;
				width:180px;
				height: 24px;
				padding:3px;
				line-height: 24px;				
				border-top:1px solid #333;
				border-left:1px solid #333;
				border-right:1px solid #ccc;
				border-bottom:1px solid #ccc;
			}
			img.verify{				
				margin-left:5px;				
				border:1px solid #ccc;
				vertical-align:middle;
				cursor: pointer;
			}
			#form-username,#form-password,#form-password2,#form-verify{
				line-height: 32px;
				margin-left: 5px;
			}
			.information-def{
				color:#000000;
			}
			.information-error{
				color:red;
			}
			.information-correct{
				color:#0f0;
			}
	</style>
	<script src="scripts/jquery-1.10.0.min.js"></script>
	<script>
		
		
		function checkUsername(){
			var usernameVal = $('#username').val();
			if(usernameVal == ''){				
				$('#form-username').html('用户名为必填项').removeClass('information-def').addClass('information-error');
				return false;
			}
			if(usernameVal.length < 4 || usernameVal.length > 20){
				$('#username').focus();
				$('#form-username').html('长度只能在4-20个字符之间').removeClass('information-def').addClass('information-error');
				return false;
			}
			
			if(/^\d+$/.html(usernameVal)){
				//$('#username').focus();
				$('#form-username').html('用户名不能是纯数字，请重新输入！').removeClass('information-def').addClass('information-error');
				return false;
			}	
			$('#form-username').html('<img src="images/correct.png" align="center"/>可以使用').removeClass('information-def information-error').addClass('information-correct');
			return true;
		}
		function checkPassword(){
			var passwordVal = $('#password').val();
			if(passwordVal == ''){
				//$('#password').focus();
				$('#form-password').html('密码为必填项');
				return false;
			}
			if(passwordVal.length < 6 || passwordVal.length > 20 ){
				//$('#password').focus();
				$('#form-password').html('长度只能在6-20个字符之间');
				return false;
			}
			$('#form-password').html('');
			return true;
		}
		function checkConfirmPassword(){
			var passwordVal = $('#password').val();
			var passwordVal2 = $('#password2').val();
			if(passwordVal2 == ''){
				//$('#password2').focus();
				$('#form-password2').html('请再次输入密码');
				return false;
			}
			if(passwordVal != passwordVal2){
				//$('#password2').focus();
				$('#form-password2').html('两次密码输入不一致');
				return false;
			}	
			$('#form-password2').html('');
			return true;
		}
		function checkVerifyCode(){
			var verifyVal = $('#verify').val();
			if(verifyVal == ''){
				//$('#verify').focus();
				$('#form-verify').html('请输入图片验证码');
				return false;
			}
			$('#form-verify').html('');
			return true;
		}
		
		$(function(){
			//初始情况下,控制信息提示
			$('#form-username').html('支持中文、字母、短横线、下划线的组合，4-20个字符').addClass('information-def');
			$('#verifyImage').click(function(){
				$(this).attr('src','verify.php?rnd=' + (new Date()).getTime());
			});
			//检测用户名
			$('#username').blur(function(){
				return checkUsername();
			});
			//检测密码
			$('#password').blur(function(){
				return checkPassword();
			});
			//检测确认密码
			$('#password2').blur(function(){
				return checkConfirmPassword();			
			});
			//检测验证码
			$('#verify').blur(function(){
				return checkVerifyCode();
			});
			//在提交表单时,要检测用户名、密码、确认密码、验证码
			$('#form').submit(function(){
				return checkUsername() && checkPassword() && checkConfirmPassword() && checkVerifyCode();
			})
		});
	</script>
</head>
<body>
	<div id="container">
		<form action="" method="post" id="form">
			<table>
				<tr class="clear">
					<td width="120">用户名</td>
					<td><input type="text" name="username" id="username"  class="username"/><span id="form-username" >555555</span></td>
				</tr>
				<tr class="clear">
					<td>密码</td>
					<td><input type="password" name="password" id="password" class="password"/><span id="form-password"></span></td>
				</tr>
				<tr class="clear">
					<td>确认密码</td>
					<td><input type="password" name="password2" id="password2" class="password2"/><span id="form-password2"></span></td>
				</tr>
				<tr class="clear">
					<td>验证码</td>
					<td><input type="text" name="verify" id="verify" class="verify"/><img src="verify.php" alt="换一换" title="换一换" class="verify" id="verifyImage"><span id="form-verify"></span></td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td><input type="submit" value="免费注册" /></td>
				</tr>			
			</table>
		</form>
	</div>
</body>
</html>

给我一瓶冰阔洛

关注

0
点赞
踩
0

收藏

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

&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &amp
复制链接

扫一扫