表单输入密码判断是否一致
表单输入密码判断是否一致
如图
=====================================
=============================================
未输入每人时候，提示，请输入密码
输入不一样的时候，判断
==================HTML========================
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en">
<html>
<head>
<title> Reset password</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="css/reset-password.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<!--container-->
<div class="container">
<div class="content">
<div class="checksum-form">
<label class="checksum-label">输入新密码</label>
<input type="password" placeholder="请输入新密码" class="checksum-input" name="tbPassword" id="tbPassword" />
<br/>
<br/>
<label class="checksum-label">确认新密码</label>
<input type="password" placeholder="请再次输入新密码" class="checksum-input" name="RetbPassword" id="RetbPassword" />
<div id="msg" class="warn"></div>
<button type="submit" class="checksum-btn">确定</button>
<!---<input type="submit" class="checksum-btn"/>-->
</div>
</div>
</div>
<!--container-->
<script type="text/javascript">
$("#RetbPassword").blur(function() {
if ($("#tbPassword").val() == "" || $("#RetbPassword").val() == "") {
alert('请输入内容');
return;
}
var $tbPassword = $("#tbPassword").val();
var $RetbPassword = $("#RetbPassword").val();
if ($tbPassword != $RetbPassword) {
alert("两次输入的密码不一致");
$("#msg").html("两次输入的密码不致，请重新输入");
} else {
alert('新密码设置成功');
$("#msg").html("");
}
});
$(".checksum-btn").click(function(){
if ($.trim($('#tbPassword').val()).length<=0 || $.trim($('#RetbPassword').val()).length<=0){
//alert("请输入密码");
$("#msg").html("请输入密码");
}
});
</script>
</body>
</html>
===========CSS===========
@charset "utf-8";
/*css reset*/
ul {
list-style: none;
}
a {
text-decoration: none;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
form {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background: #fff;
font-size: 12px;
font-family: Microsoft YaHei;
SimSun,
Arial,
Helvetica,
sans-serif;
}
/*css reset*/
/*container*/
.container {
width: 100%;
height: 100%;
background-color: #f9f9f9;
border-top: 1px solid #fff;
}
.container .content {
width: 732px;
height: auto;
padding: 20px;
margin-bottom: 30px;
background-color: #fff;
border: 1px solid #e3e3e3;
border-radius: 2px;
box-shadow: 1px 1px 2px #f0f0f0;
margin: 20px auto;
}
.checksum-form {
margin: 20px auto 3px;
width: 80%;
text-align: center;
}
.checksum-form .checksum-label {
font-size: 16px;
margin-right: 10px;
color: #4d4d4d;
text-align: right;
width: 90px;
display: inline-block;
}
.checksum-form .checksum-input {
width: 190px;
padding: 8px 9px;
line-height: 18px;
border: 1px solid #e0e0e0;
}
.content .checksum-btn {
display: block;
width: 160px;
height: 50px;
line-height: 50px;
border: none;
overflow: hidden;
text-align: center;
background: #69b3f2;
font-size: 26px;
border-radius: 2px;
color: #FFF;
margin: 25px auto 50px 238px;
cursor: pointer;
}
.strength-back {
float: left;
background: #d6d3d3;
width: 62px;
height: 4px;
margin-top: 5px;
_margin-top: 0px;
margin-left: 5px;
_height: 2px;
font-size: 0px;
}
.checksum-form .warn {
width: 200px;
height: 28px;
color: red;
margin: 10px auto 0 238px;
}
/*container/
=======================
下载地址：https://files.cnblogs.com/files/leshao/%E8%A1%A8%E5%8D%95%E8%BE%93%E5%85%A5%E5%AF%86%E7%A0%81%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E4%B8%80%E8%87%B4.rar
