fourcal/src/main/resources/templates/admin/account_password.ftl

260 lines
12 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<#assign base=request.contextPath />
<#import "../common/defaultLayout.ftl" as defaultLayout>
<@defaultLayout.layout>
<style>
/*验证:提示信息样式 begin*/
.am-alert-danger {
background-color: transparent;
border-color: transparent;
color: red;
}
.am-alert {
margin-bottom: 1em;
padding: .625em;
background: transparent;
border: none;
border-radius: 0;
}
/*验证:提示信息样式 end*/
</style>
<div class="admin-content">
<form id="accountForm" name="accountForm" method="POST" class="am-form">
<input type="hidden" id="id" name="id" value="${(SysUser.id)!1}"/>
<div class="am-tabs am-margin" style="min-height: 200px;" data-am-tabs>
<ul class="am-tabs-nav am-nav am-nav-tabs">
<li class="am-active"><a href="#tab1">修改密码</a></li>
</ul>
<div class="am-tabs-bd">
<div class="am-tab-panel am-fade am-in am-active" id="tab1">
<span style="color: red">密码长度至少8位且同时包含数字、小写字母、大写字母、特殊字符[`~!@#$%^&*()_+<>?:"{},.\/;'[\]])中任意两种</span>
<div class="am-g am-form-group am-margin-top">
<div class="am-u-sm-4 am-u-md-2 am-text-right">账号名:
</div>
<div class="am-u-sm-6 am-u-md-6">
<input type="text" value="${(SysUser.userName)!'admin'}" readonly/>
</div>
<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
</div>
<div class="am-g am-form-group am-margin-top">
<div class="am-u-sm-4 am-u-md-2 am-text-right">原密码:<span style="color: red;">*</span>
</div>
<div class="am-u-sm-6 am-u-md-6">
<input class="am-input-sm js-pattern-password" data-validation-message="请输入原密码"
type="password" name="password" id="password" placeholder="请输入原密码" required/>
</div>
<div class="am-u-sm-2 am-u-md-4 input-msg">
<div class="am-alert am-alert-danger">${passwordMessages!''}</div>
</div>
</div>
<div class="am-g am-form-group am-margin-top">
<div class="am-u-sm-4 am-u-md-2 am-text-right">新密码:<span style="color: red;">*</span>
</div>
<div class="am-u-sm-6 am-u-md-6">
<input class="am-input-sm js-pattern-newPassword"
data-validation-message="请输入新密码(8-20位非中文字符)" type="password" id="newPassword"
name="newPassword" placeholder="请输入新密码(8-20位非中文字符)" required/>
</div>
<div class="am-u-sm-2 am-u-md-4 input-msg">
<div class="am-alert am-alert-danger">${newPasswordMessages!''}</div>
</div>
</div>
<div class="am-g am-form-group am-margin-top">
<div class="am-u-sm-4 am-u-md-2 am-text-right">确认密码:<span style="color: red;">*</span>
</div>
<div class="am-u-sm-6 am-u-md-6">
<input class="am-input-sm js-pattern-newPasswordConfirm"
data-validation-message="请输入确认密码" type="password" id="newPasswordConfirm"
name="newPasswordConfirm" placeholder="请输入确认密码" required/>
</div>
<div class="am-u-sm-2 am-u-md-4 input-msg">
<div class="am-alert am-alert-danger">${newPasswordConfirmMessages!''}</div>
</div>
</div>
</div>
</div>
</div>
<div class="am-margin">
<button type="button" id="save" name="save" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
</div>
</form>
</div>
<script type="text/javascript" src="${base}/common/js/rsa/jsencrypt.min.js"></script>
<script src="${base}/layer/layer.js"></script>
<script type="text/javascript">
$(function () {
$('#save').click(function () {
if (flag == -1) {
return false;
}
var id = $("#id").val();
var pwd = $("#password").val();
var newPwd = $("#newPassword").val();
if (pwd == newPwd) {
alert("新密码跟旧密码不能一样");
return false;
}
var encrypt = new JSEncrypt();
encrypt.setPublicKey("${publickey!''}");
var encryptedPwd = encrypt.encrypt(pwd);
var encryptedNewPwd = encrypt.encrypt(newPwd);
$.ajax({
type: 'post',
url: "${base}/account/updatePassword",
data: {
"id": id,
"password": encryptedPwd,
"newPassword": encryptedNewPwd
},
cache: false,
dataType: 'json',
success: function (data) {
if (0 == data.status) {
layer.alert(data.msg, function (index) {
layer.close(index);
window.location.href = "${base}/admin/logout";
});
} else {
layer.alert(data.msg, function (index) {
layer.close(index);
});
}
},
error: function () {
layer.msg("密码修改失败,请联系管理员");
}
});
});
var flag = 0;
/*表单验证begin*/
//自定义规则用法验证元素上加class="js-pattern-sort"
if ($.AMUI && $.AMUI.validator) {
$.AMUI.validator.patterns.newPassword = /^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{8,20}$/;
}
var $myField = null;
var myMsg = "";
$("#accountForm").validator({
//自定义验证
validate: function (validity) {
var $field = $(validity.field);
var v = $field.val();
if ($field.is('#newPasswordConfirm')) {
if (v && (v != $('#newPassword').val())) {
$myField = $field;
myMsg = "两次密码输入不一致"
validity.valid = false;
}
}
if ($field.is('#newPasswordConfirm') || $field.is('#newPassword')) {
if(v.length < 8){
myMsg = "密码长度至少8位"
$myField = $field;
validity.valid = false;
}
var ls = 0;
var reg_num = /[0-9]/;
var result = v.match(reg_num);
console.log("数字验证" + result);
if (result != null) {
ls++;
/*myMsg = "密码不符合规范"
$myField = $field;
validity.valid = false;*/
}
reg_num = /[a-z]/i;
result = v.match(reg_num);
console.log("小写验证" + result);
if (result != null) {
ls++;
/*myMsg = "密码不符合规范"
$myField = $field;
validity.valid = false;*/
}
reg_num = /[A-Z]/;
result = v.match(reg_num);
console.log("大写验证" + result);
if (result != null) {
ls++;
/*myMsg = "密码不符合规范"
$myField = $field;
validity.valid = false;*/
}
reg_num = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;
result = v.match(reg_num);
console.log("特殊字符验证" + result);
if (result != null) {
ls++;
/*myMsg = "密码不符合规范"
$myField = $field;
validity.valid = false;*/
}
console.log("ls===========" + ls);
if (ls < 2) {
myMsg = "密码应包含大小写字母、数字、特殊字符中任意两种"
$myField = $field;
validity.valid = false;
}
}
},
// 域通过验证时回调
onValid: function (validity) {
var $field = $(validity.field);
flag = 0;
$(validity.field).closest('.am-form-group').find('.am-alert').hide();
},
// 验证出错时的回调, validity 对象包含相关信息,格式通 H5 表单元素的 validity 属性
onInValid: function (validity) {
flag = -1;
var $field = $(validity.field);
var $group = $field.closest('.am-form-group');
var $alert = $group.find('.am-alert');
// 使用自定义的提示信息 或 插件内置的提示信息
console.log("accountForm fail=" + $field.attr.name);
var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
if ($myField && myMsg && $field.val() && $field.is($myField)) {
msg = myMsg;
$myField = null;
myMsg = "";
} else {
// 使用自定义的提示信息 或 插件内置的提示信息
msg = $field.data('validationMessage') || this.getValidationMessage(validity);
}
if (!$alert.length) {
$alert = $("<div class='am-alert am-alert-danger'></div>").hide().appendTo($group.find(".input-msg"));
}
$alert.html(msg).show();
}
});
/*表单验证end*/
});
</script>
</@defaultLayout.layout>