用bootstrap做一个表单验证
validate.js
$(function(){
var userReg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
var pwdReg = /^[a-zA-Z]\w{5,17}$/;
validateForm($('#text'),userReg);
validateForm($('#pwd'),pwdReg);
function validateForm($obj,reg){
$obj.on({
blur:function(){
var val = $(this).val();
if(reg.test(val)){
$(this).parents('.form-group').attr('i', '1').removeClass().addClass('form-group has-success has-feedback').find('span').removeClass().addClass('glyphicon glyphicon-ok form-control-feedback');
}else{
$(this).parents('.form-group').attr('i', '0').removeClass().addClass('form-group has-error has-feedback').find('span').removeClass().addClass('glyphicon glyphicon-remove form-control-feedback');
}
},
focus:function(){
$(this).val("").parents('.form-group').removeClass('has-success has-error').find('span').addClass('hidden');
}
})
}
$('button').click(function(){
//第一种方式
// var $parents = $('.form-group');
// if($parents.eq(0).hasClass('has-success')&&$parents.eq(1).hasClass('has-success')){
// $('form').submit();
// }
第二种方式
if(parseInt($('.form-group').eq(0).attr('i'))&&parseInt($('.form-group').eq(1).attr('i'))){
$('form').submit();
}
return false;
})
})
这个名随便起
<!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/css/bootstrap.min.css"/>
<style type="text/css" media="screen">
.mt50{
margin-top: 50px;
}
</style>
</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">
<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">
<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>
<script src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/validate.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>