为了让页面更为好看一些，我一般会选择bootstrap，写起来虽然看着麻烦，但是我们真正需要的只有中间的内容
下面是html的内容
<div id="tbx"">
<div id="xgmm" class="gnq">
<br /><br />
<div style="font-size:10px; color:#999; float:left;margin-left: 12%;">提示：确认修改密码后将跳转到登录页面重新登录</div>
<div style="clear:both"></div>
<br />
<form action="xgmm.php" method="post" class="form-horizontal" role="form">
<div class="form-group"><!--原始密码-->
<label for="firstname" class="col-sm-3 control-label">请输入原始密码</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="ysmm" placeholder="请输入原始密码">
</div>
<span class="col-sm-4 ts" id="ysmmts"></span>
</div>
<div class="form-group"><!--新密码-->
<label for="lastname" class="col-sm-3 control-label">请输入新密码</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="xmm" name="xmm" placeholder="请输入新密码">
</div>
<span class="col-sm-4 ts" id="xmmts"></span>
</div>
<div class="form-group"><!--确认新密码-->
<label for="lastname" class="col-sm-3 control-label">请重新输入新密码</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="qrxmm" name="qrxmm" placeholder="请重新输入新密码">
</div>
<span class="col-sm-4 ts" id="qrxmmts"></span>
</div>
<div class="form-group"><!--确认修改按钮-->
<div class="col-sm-offset-2 col-sm-6">
<button id="qrxg" type="submit" class="btn btn-primary">确认修改</button>
</div>
</div>
</form>
</div>
</div>
下面是jquery部分
$("#ysmm").blur(function(){ysmm();});
$("#xmm").keyup(function(){xmm();});
function ysmm(){
var a = true;
var ysmm = $("#ysmm").val();
if(ysmm==""){
$("#ysmmts").html("您输入的原始密码为空！");
a = false;
}
else{
$.ajax({
async:false,
url:"ysmm.php",
data:{ysmm:ysmm},
type:"POST",
dataType:"TEXT",
success:function(data){
if(data.trim()==0)
{
$("#ysmmts").html("");
}
else if(data.trim()==1)
{
$("#ysmmts").html("您输入的原始密码有误！");
a = false;
}
}
})
}
return a;
}
function xmm(){
var xmm = $("#xmm").val();
var b = true;
$.ajax({
async:false,
url:"xmm.php",
data:{xmm:xmm},
type:"POST",
dataType:"TEXT",
success:function(data){
//alert(data);
if(data.trim()==0)
{
$("#xmmts").html("您输入的新密码弱爆啦！换一个吧");
b = false;
}
else if(data.trim()==1)
{
$("#xmmts").html("您输入的新密码强度强强强！");
}
else if(data.trim()==2)
{
$("#xmmts").html("您输入的新密码强度强！");
}
else if(data.trim()==3)
{
$("#xmmts").html("您输入的新密码强度中！");
}
else if(data.trim()==4)
{
$("#xmmts").html("您输入的新密码强度中！");
}
else if(data.trim()==5)
{
$("#xmmts").html("您输入的新密码强度弱！");
}
}
});
return b;
}
//修改密码的确认修改按钮的对应事件
$("#qrxg").click(function(){
var qrxmm = $("#qrxmm").val();
var xmm1 = $("#xmm").val();
var ysmm1 = $("#ysmm").val();
if(xmm1 != qrxmm)
{
$("#qrxmmts").html("您输入的新密码不一致！");
return false;
}
if(xmm1=="" && ysmm1=="")
{
$("#ysmmts").html("您输入的原始密码为空！");
$("#xmmts").html("您输入的新密码为空！");
return false;
}
else if(xmm1=="" || ysmm1=="" )
{
if(xmm1=="")
{
$("#xmmts").html("您输入的新密码为空！");
return false;
}
else if(ysmm1=="")
{
$("#ysmmts").html("您输入的原始密码为空！");
return false;
}
}
else if(xmm1==ysmm1)
{
$("#xmmts").html("您输入的新密码与原始密码相同！");
return false;
}
else if(ysmm() && xmm())
{
return true;
}
else
{
return false;
}
});
原始密码部分的验证 ysmm.hpp
<?php
session_start();
include("DBDA.class.php");
$db = new DBDA();
if(!empty($_SESSION["uid"]))
{
$num = $_SESSION["uid"];
$sql = "select pwd from login where uid='{$uid}' ";
$res = $db->Query($sql);
}
if(!empty($_POST["ysmm"]))
{$ysmm = $_POST["ysmm"];
if($ysmm==$res[0][0])//输入的原始密码与当前登录者的原始密码相同
{
echo 0;
}
else
{
echo 1;
}
}
新密码验证部分 xmm.php
<?php
if(!empty($_POST["xmm"]))
{
$str = $_POST["xmm"];
if(strlen($str)<3)
{echo 0;}
else
{
if(preg_match("/[|*|.|=|+|-|]+/",$str) && preg_match("/[A-Z]+/",$str) && preg_match("/[a-z]+/",$str) && preg_match("/[0-9]+/",$str))
{
echo 1;
}
else if(preg_match("/[A-Z]+/",$str) && preg_match("/[a-z]+/",$str) && preg_match("/[0-9]+/",$str))
{
echo 2;
}
else if(preg_match("/[A-Z]+/",$str) && preg_match("/[0-9]+/",$str))
{
echo 3;
}
else if(preg_match("/[a-z]+/",$str) && preg_match("/[0-9]+/",$str))
{
echo 4;
}
else if(preg_match("/[0-9]+/",$str))
{
echo 5;
}
}
}
这样修改密码部分就可以完成了，新密码验证部分 我用的正则是大写字母 小写字母和数字三部分，这里可以自行修改，有很多地方的密码是可以用标点符号等等