bootstrap实现表单验证（正则表达式）

最新推荐文章于 2024-06-25 17:00:45 发布

FYANGFEI

最新推荐文章于 2024-06-25 17:00:45 发布

阅读量4.7k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/FYANGFEI/article/details/81256962

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.源码下载

2.HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <title>bootstrap</title>
    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css"/>    
</head>
<body>
	<div class="container mt50">
		
		<div class="row">
			
			<div class="col-md-2"></div>
			<div class="col-md-8">
				
				<form class="form-horizontal">
				  <div class="form-group has-feedback" id="div1">
				    <label for="inputEmail3" class="col-sm-2 control-label">用户名:</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" id="text" placeholder="请输入用户名">
				      <span class="glyphicon glyphicon-ok form-control-feedback hidden "></span>
				    </div>
				  </div>
				  <div class="form-group has-feedback"  id="div2">
				    <label for="inputPassword3" class="col-sm-2 control-label">密码:</label>
				    <div class="col-sm-10">
				      <input type="password" class="form-control" id="pwd" placeholder="请输入密码">
				       <span class="glyphicon glyphicon-ok form-control-feedback hidden"></span>
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="col-sm-offset-2 col-sm-10">
				      <div class="checkbox">
				        <label>
				          <input type="checkbox"> Remember me
				        </label>
				      </div>
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="col-sm-offset-2 col-sm-10">
				      <button type="submit" class="btn btn-default">登录</button>
				    </div>
				  </div>
				</form>

			</div>
			<div class="col-md-2"></div>

		</div>


	</div>
</body>

	<script src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript" src="js/validate.js"></script>
	<script src="bootstrap/dist/js/bootstrap.min.js"></script>
</html>

2.js

js有详细注释

$(function(){

	var userReg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;

	var pwdReg = /^[a-zA-Z]\w{5,17}$/;
	//匹配正则表达式
	validateForm($('#text'),userReg,$('#div1'));

	validateForm($('#pwd'),pwdReg,$('#div2'));

	function validateForm($obj,reg,$div){

		$obj.on({
		//失去焦点是
		blur:function(){
			//得到表单内的值
			var val = $(this).val();
			//正则表达式匹配
			if(reg.test(val)){
				//符合正则规则
				$(this).attr('index','1');
				$div.addClass(" has-success");
				$div.removeClass(" has-error");
				$div.find($obj.next()[0]).removeClass('glyphicon-remove');
			}else{
				//不符合正则
				$(this).attr('index','0');
				$div.removeClass(" has-success");
				$div.addClass(" has-error");
				$div.find($obj.next()[0]).removeClass('hidden');
				$div.find($obj.next()[0]).addClass('glyphicon-remove');
			}

		},

		focus:function(){

			$(this).val("");

		}

	})

	}

	$('button').click(function(){

		var att1 =parseInt($('#text').attr('index'));
		var att2 =parseInt($('#pwd').attr('index'));

		if(att1&&att2){

			$('form').submit();

		}

		return false;

	})

})

FYANGFEI

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
bootstrap实现表单验证（正则表达式）

1.源码下载2.HTML&lt;!DOCTYPE html&gt;&lt;html lang="zh-CN"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
复制链接

扫一扫

专栏目录