Form Validation
毋承基
<html>
<head>
<title>Profile</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="bootstrap/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/membership.css"/>
<style type="text/css">
body{background: #c0c0c0}
.bgwhite{background:#fff;}
.ptb10{padding-top: 10px;padding-bottom: 10px;}
.ptb20{padding-top: 20px;padding-bottom: 20px;}
.imgholder{height:200px;width: 200px;background: #521412; margin: 0 auto;}
.custom-size{font-size: 3em;}
.unit-box{padding: 0px 10px;background: #fff;}
.unit-icon{display:inline-block;height: 50px;width: 50px; padding:5px; background: antiquewhite;float: left;}
.unit-right{display:inline-block;height: 50px;width: 180px;padding:5px; overflow: hidden; word-wrap: break-word; background: antiquewhite;}
.unit-right>p{margin-bottom: 0px;}
#aboutme.tab-content{padding: 10px;}
</style>
<script type="text/javascript">
function comfirmPsd(p1,p2){
var spanEl= document.getElementById("tip");
if(p1.value!=p2.value||p1.value==''||p2.value==''){
//incorrect password.
p2.setCustomValidity('Password incorrect');
// spanEl.innerHTML="Password is incorrect.";
}else{
//correct.
p2.setCustomValidity('');
//spanEl.innerHTML="";
}
}
$(function () {
$("#changePwd").click(function () {
$("#Password").toggle();
if ($("#Password").is(":visible")) {
$(this).text("Cancel");
$("#Password").focus();
$("#Password").select();
} else {
$(this).text("ChangePassword");
$("#Password").val($("#pwd").val());
}
})
});
</script>
</head>
<body id="paragraph">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-sm-offset-3 col-md-offset-3 col-lg-offset-3">
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active"><a href="#aboutme" data-toggle="tab">ABOUTME</a></li>
<li role="presentation" class="disabled"><a href="#resume">RESUME</a></li>
<li role="presentation" class="disabled"><a href="#portfolio">PORTFOLIO</a></li>
<li role="presentation" class="disabled"><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
<div class="row" >
<div class="bgwhite tab-content ptb20 col-md-8 col-md-offset-2">
<!--About Me-->
<div id="aboutme" class="tab-pane fade in active ptb20">
<div class="col-md-4">
<div class="imgholder img-rounded"></div>
</div>
<div class="col-md-8">
<form >
<div class="col-md-9">
<h1>Sunny<small> - Sunny Luthra</small></h1>
<h3><span class="glyphicon glyphicon-envelope"></span>Michael.wu@gkfx.com</h3>
<h3 class="disabled"><span class="glyphicon glyphicon-phone"></span>+86 13524199512</h3>
<h3>
<input type="password" id="Password1" placeholder="password" required/>
<input type="password" id="Password2"
οnfοcus="comfirmPsd(document.getElementById('Password1'),this)"
οninput="comfirmPsd(document.getElementById('Password1'),this)" required placeholder="password"/>
</h3>
<a class="btn btn-primary" id="changePwd">Change Password</a>
</div>
<div class="col-md-3"><input class="btn btn-primary btn-block" type="submit" value="Save"/></div>
</form>
</div>
<div class="clearfix"></div>
<div class="ptb20 col-md-4">
<div class="unit-box">
<div class="unit-icon">
<i class="glyphicon glyphicon-envelope custom-size"></i>
</div>
<div class="unit-right">
<p class="unit-title" ><strong>Michael.wu@gkfx.com</strong></p>
<p>Michael.wu</p>
</div>
</div>
</div>
<div class="ptb20 col-md-4">
<div class="unit-box">
<div class="unit-icon"><i class="glyphicon glyphicon-envelope custom-size"></i></div>
<div class="unit-right">
<p class="unit-title" ><strong>Michael.wu@gkfx.com</strong></p>
<p>Michael.wu</p>
</div>
</div>
</div>
<div class="ptb20 col-md-4">
<div class="unit-box">
<div class="unit-icon"><i class="glyphicon glyphicon-envelope custom-size"></i></div>
<div class="unit-right">
<p class="unit-title" ><strong>Michael.wu@gkfx.com</strong></p>
<p>Michael.wu</p>
</div>
</div>
</div>
</div>
<!--RESUME-->
<div id="resume" class="tab-pane fade in">
<div style="width:400px; padding:40px 40px; background:red;">
<div style="width:40px; float:left; background:blue; display:block; color:white;"> H </div>
<div style="width:300px; float:left; background:green; display:block; color:white;">
Habam güm güm güm <br> hello worldhello worldhello worldhello worldhello worldhello worldhello
worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello
worldhello worldhello worldhello worldhello world
</div>
<div style="clear:both;"></div>
</div>
</div>
<div id="portfolio" class="tab-pane fade in">
<h1>PORTFOLIO</h1>
</div>
<div id="contact" class="tab-pane fade in">
<h1>CONTACT</h1>
</div>
</div>
</div>
</body>
</html>
客户端验证有许多验证属性，使用都很方便，最近有个密码确认验证不知用什么属性可以使用。在网上搜索可以使用以上方法使用可以保持验证的效果保持一致。
引用地址：引用地址
类似资料：