密码确认密码
标签（空格分隔）： 密码验证
带有比较复杂的密码验证方式，比如具备大小写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>设备管理系统|密码修改</title>
<link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="../../node_modules/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<!-- 界面动画效果 -->
<link href="../../node_modules/animate.css/animate.css" rel="stylesheet"/>
<!-- H++ CSS样式 -->
<link href="../css/style.css" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
<form class="form-horizontal" id="modifyPasswordForm">
<div class="form-group">
<label class="col-sm-2 control-label">原密码</label>
<div class="col-sm-6">
<input type="password" name="originalPassword" id="originalPassword" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">新密码</label>
<div class="col-sm-6">
<input type="password" name="newPassword" id="newPassword" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-6">
<input type="password" name="confirmPassword" id="confirmPassword" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<button class="btn btn-primary" id="confirm">确认</button>
<a class="btn btn-default" id="cancel">取消</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- 全局js -->
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../js/jquery.validate.min.js"></script>
<script src="../../node_modules/layui-layer/dist/layer.js"></script>
<!-- 自定义js -->
<script src="../js/content.js"></script>
<script src="../js/modifyPassword.js"></script>
</body>
</html>
//用户名必须需包含数字和大小写字母中至少两种
$.validator.addMethod("passwordrule", function(value, element) {
var userblank = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)[0-9A-Za-z]{6,10}$/;
return this.optional(element) ||(userblank.test(value));
}, "需包含数字和大小写字母中至少两种字符的5-10位字符");
$("#modifyPasswordForm").validate({
rules: {
originalPassword: "required",
newPassword: {
required: true,
minlength:6,
passwordrule: true
},
confirmPassword:{
required: true,
minlength:6,
equalTo:"#newPassword"
}
},
messages: {
originalPassword: "请输入您的原始登陆密码",
newPassword:{
required: "请输入您的新密码",
minlength:"请输入最少为6为字符",
passwordrule: "为了保证您的账号安全，需包含数字和大小写字母中至少两种字符的6-10位字符!"
},
confirmPassword: {
required: "请输入您的确认密码",
minlength:"请输入最少为6为字符",
equalTo:"两次密码输入不一致"
},
},
submitHandler: function(){
layer.msg("密码修改成功");
}
});
//当点击“取消按钮时执行”
$('#cancel').click(function () {
location.reload(true);//刷新当前页面
});
表单验证这message信息是通过input里name属性获取的而不是id，表单里的提交必须要是button，否则不提交