<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Jquery.validate.js示例</title>
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/Site.css", "~/Content/themes/base/jquery-ui.css")
@Styles.Render("~/Scripts/jqGrid/css/ui.jqgrid.css")
@Scripts.Render("~/Scripts/json2.js", "~/Scripts/jquery-1.9.1.js", "~/Scripts/jquery.form.js")
@Scripts.Render("~/Scripts/jquery-ui-1.10.1.js")
@Scripts.Render("~/Scripts/jquery.validate.js")
@Scripts.Render("~/Scripts/jquery.cookie.js")
@Scripts.Render("~/Scripts/Gaia.Web.Common.js")
@Scripts.Render("~/Scripts/jqGrid/js/jquery.jqGrid.min.js")
@Scripts.Render("~/Scripts/jqGrid/js/i18n/grid.locale-cn.js")
<script type="text/javascript" src="~/Scripts/jQuery.md5.js"></script>
<style type="text/css">
form {
font-size:10pt;
text-align:left;
}
table {
margin:10px;
}
label.error {
color: red;
font-style: italic;
cursor:pointer;
margin-left:12px;
font-size:12px;
}
input.error { border:1px solid #F00; }
input[type="text"]:focus { border:1px solid #0ff; }
ul,li { list-style:none}
.box {80%; height:600px; border:0px solid #ccc; margin:10px; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif}
.tagMenu {height:28px; line-height:28px; background:#efefef; position:relative; border-bottom:1px solid #999}
.tagMenu h2 {font-size:12px; padding-left:10px;}
.tagMenu ul {position:absolute; left:100px; bottom:-1px; height:26px;}
ul.menu li {float:left; margin-bottom:1px; line-height:16px; height:14px; margin:5px 0 0 -1px; border-left:1px solid #999; text-align:center; padding:0 12px; cursor:pointer}
ul.menu li.current {border:1px solid #999; border-bottom:none; background:#fff; height:25px; line-height:26px; margin:0}
.content { padding:10px}
</style>
<script type="text/javascript">
var oldPassword = null;
$(function () {
initMenu();
validateExt();
getUserInfo();
validate();
});
//初始化导航栏
function initMenu() {
$("ul.menu li:first-child").addClass("current");
$("div.content").find("div.layout:not(:first-child)").hide();
$("div.content div.layout").attr("id", function () { return "No" + $("div.content div.layout").index(this) });
$("ul.menu li").mouseenter(function () {
var current = $("ul.menu li");
var index = current.index(this);
var prefix = "No";
show(current, index, prefix);
});
function show(controlMenu, num, prefix) {
var content = prefix + num;
$('#' + content).siblings().hide();
$('#' + content).show();
controlMenu.eq(num).addClass("current").siblings().removeClass("current");
};
}
//UI校验
function validate() {
$("#nameForm").validate({
rules: {
niceName: {
required: true
}
},
messages: {
niceName: "昵称不能为空",
}
});
$("#nameSubmit").click(
function () {
if ($("#nameForm").valid()) {
updateNiceName();
}
});
$("#pwdForm").validate({
rules: {
oldPwd: {
required: true,
minlength: 6,
isWrong: true
},
newPwd: {
required: true,
minlength: 6,
notEqual: "#oldPwd"
},
confirmPwd: {
required: true,
minlength: 6,
equalTo: "#newPwd",
notEqual: "#oldPwd"
}
},
messages: {
oldPwd: {
required: "密码至少为6位",
minlength: "密码至少为6位"
},
newPwd: {
required: "密码至少为6位",
minlength: "密码至少为6位"
},
confirmPwd: {
required: "密码至少为6位",
minlength: "密码至少为6位",
equalTo: "确认密码不相同"
}
}
});
$("#pwdSubmit").click(
function () {
if ($("#pwdForm").valid()) {
updatePassword();
}
});
}
//自定义校验
function validateExt() {
jQuery.validator.addMethod("isWrong",
function (value, element) {
var md5Pwd = $.md5(value);
return md5Pwd == oldPassword ? true : false;
},
"旧密码不正确");
jQuery.validator.addMethod("notEqual",
function (value, element, params) {
var oldPwd = $(params).val();
return oldPwd == value ? false : true;
},
"新旧密码不能相同");
}
//查询用户信息
function getUserInfo() {
var userInfo = {
"APIKEY": unescape($.cookie("user_authkey")),
"Data": {
"user_authkey": unescape($.cookie("user_authkey"))
}
};
var jsonUserInfo = JSON.stringify(userInfo);
$.ajax({
url: 'users.get',
cache: false,
type: 'POST',
asyn: false,
contentType: 'application/json; charset=utf-8',
data: jsonUserInfo,
success: function (content) {
var userInfo = content.Data[0];
oldPassword = userInfo.user_pass;
$('#niceName').val(userInfo.user_nicename);
}
});
}
//更新用户昵称
function updateNiceName() {
var regInfo = {
"APIKEY": unescape($.cookie("user_authkey")),
"Data": {
"user_authkey": unescape($.cookie("user_authkey")),
"user_nicename": $('#niceName').val(),
}
};
var jsonRegInfo = JSON.stringify(regInfo);
$.ajax({
url: 'users.update',
cache: false,
type: 'POST',
asyn: false,
contentType: 'application/json; charset=utf-8',
data: jsonRegInfo,
success: function (flag) {
if (flag == true) {
alert("昵称修改成功");
}
else {
}
},
error: function (msg) {
alert(msg);
}
});
}
//更新用户密码
function updatePassword() {
var regInfo = {
"APIKEY": unescape($.cookie("user_authkey")),
"Data": {
"user_authkey": unescape($.cookie("user_authkey")),
"user_pass": $('#newPwd').val()
}
};
var jsonRegInfo = JSON.stringify(regInfo);
$.ajax({
url: 'users.update',
cache: false,
type: 'POST',
asyn: false,
contentType: 'application/json; charset=utf-8',
data: jsonRegInfo,
success: function (flag) {
if (flag == true) {
alert("密码修改成功");
}
else {
}
},
error: function (msg) {
alert(msg);
}
});
}
</script>
</head>
<body>
<div class="box" style="float:left">
<div class="tagMenu">
<h2 style="text-align:left">用户信息修改</h2>
<ul class="menu">
<li id="TabChangeName">昵称修改</li>
<li id="TabChangePwd">密码修改</li>
</ul>
</div>
<div class="content">
<div id="ItemChangeName" class="layout" style="text-align:left" >
<form method="post" id="nameForm" name="nameForm">
<table>
<tr>
<td><label>用户昵称：</label></td>
<td><input name="niceName" id="niceName" value="" type="text" size="25" /></td>
</tr>
</table>
<input type="button" name="nameSubmit" id="nameSubmit" style="float:left;" value="修改" />
<input type="reset" name="nameReset" id="nameReset" style="float:left;" value="重置" />
</form>
</div>
<div id="ItemChangePwd" class="layout" style="text-align:left" >
<form method="post" id="pwdForm" name="pwdForm">
<table>
<tr>
<td><label>原 密 码：</label></td>
<td><input name="oldPwd" id="oldPwd" value="" type="password" size="26" /></td>
</tr>
<tr>
<td><label>新 密 码：</label></td>
<td><input name="newPwd" id="newPwd" value="" type="password" size="26" /></td>
</tr>
<tr>
<td><label>确认密码：</label></td>
<td><input name="confirmPwd" id="confirmPwd" value="" type="password" size="26" /></td>
</tr>
</table>
<input type="button" name="pwdSubmit" id="pwdSubmit" style="float:left;" value="修改" />
<input type="reset" name="pwdReset" id="pwdReset" style="float:left;" value="重置" />
</form>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Jquery.validate.js示例</title>
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/Site.css", "~/Content/themes/base/jquery-ui.css")
@Styles.Render("~/Scripts/jqGrid/css/ui.jqgrid.css")
@Scripts.Render("~/Scripts/json2.js", "~/Scripts/jquery-1.9.1.js", "~/Scripts/jquery.form.js")
@Scripts.Render("~/Scripts/jquery-ui-1.10.1.js")
@Scripts.Render("~/Scripts/jquery.validate.js")
@Scripts.Render("~/Scripts/jquery.cookie.js")
@Scripts.Render("~/Scripts/Gaia.Web.Common.js")
@Scripts.Render("~/Scripts/jqGrid/js/jquery.jqGrid.min.js")
@Scripts.Render("~/Scripts/jqGrid/js/i18n/grid.locale-cn.js")
<script type="text/javascript" src="~/Scripts/jQuery.md5.js"></script>
<style type="text/css">
form {
font-size:10pt;
text-align:left;
}
table {
margin:10px;
}
label.error {
color: red;
font-style: italic;
cursor:pointer;
margin-left:12px;
font-size:12px;
}
input.error { border:1px solid #F00; }
input[type="text"]:focus { border:1px solid #0ff; }
ul,li { list-style:none}
.box {80%; height:600px; border:0px solid #ccc; margin:10px; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif}
.tagMenu {height:28px; line-height:28px; background:#efefef; position:relative; border-bottom:1px solid #999}
.tagMenu h2 {font-size:12px; padding-left:10px;}
.tagMenu ul {position:absolute; left:100px; bottom:-1px; height:26px;}
ul.menu li {float:left; margin-bottom:1px; line-height:16px; height:14px; margin:5px 0 0 -1px; border-left:1px solid #999; text-align:center; padding:0 12px; cursor:pointer}
ul.menu li.current {border:1px solid #999; border-bottom:none; background:#fff; height:25px; line-height:26px; margin:0}
.content { padding:10px}
</style>
<script type="text/javascript">
var oldPassword = null;
$(function () {
initMenu();
validateExt();
getUserInfo();
validate();
});
//初始化导航栏
function initMenu() {
$("ul.menu li:first-child").addClass("current");
$("div.content").find("div.layout:not(:first-child)").hide();
$("div.content div.layout").attr("id", function () { return "No" + $("div.content div.layout").index(this) });
$("ul.menu li").mouseenter(function () {
var current = $("ul.menu li");
var index = current.index(this);
var prefix = "No";
show(current, index, prefix);
});
function show(controlMenu, num, prefix) {
var content = prefix + num;
$('#' + content).siblings().hide();
$('#' + content).show();
controlMenu.eq(num).addClass("current").siblings().removeClass("current");
};
}
//UI校验
function validate() {
$("#nameForm").validate({
rules: {
niceName: {
required: true
}
},
messages: {
niceName: "昵称不能为空",
}
});
$("#nameSubmit").click(
function () {
if ($("#nameForm").valid()) {
updateNiceName();
}
});
$("#pwdForm").validate({
rules: {
oldPwd: {
required: true,
minlength: 6,
isWrong: true
},
newPwd: {
required: true,
minlength: 6,
notEqual: "#oldPwd"
},
confirmPwd: {
required: true,
minlength: 6,
equalTo: "#newPwd",
notEqual: "#oldPwd"
}
},
messages: {
oldPwd: {
required: "密码至少为6位",
minlength: "密码至少为6位"
},
newPwd: {
required: "密码至少为6位",
minlength: "密码至少为6位"
},
confirmPwd: {
required: "密码至少为6位",
minlength: "密码至少为6位",
equalTo: "确认密码不相同"
}
}
});
$("#pwdSubmit").click(
function () {
if ($("#pwdForm").valid()) {
updatePassword();
}
});
}
//自定义校验
function validateExt() {
jQuery.validator.addMethod("isWrong",
function (value, element) {
var md5Pwd = $.md5(value);
return md5Pwd == oldPassword ? true : false;
},
"旧密码不正确");
jQuery.validator.addMethod("notEqual",
function (value, element, params) {
var oldPwd = $(params).val();
return oldPwd == value ? false : true;
},
"新旧密码不能相同");
}
//查询用户信息
function getUserInfo() {
var userInfo = {
"APIKEY": unescape($.cookie("user_authkey")),
"Data": {
"user_authkey": unescape($.cookie("user_authkey"))
}
};
var jsonUserInfo = JSON.stringify(userInfo);
$.ajax({
url: 'users.get',
cache: false,
type: 'POST',
asyn: false,
contentType: 'application/json; charset=utf-8',
data: jsonUserInfo,
success: function (content) {
var userInfo = content.Data[0];
oldPassword = userInfo.user_pass;
$('#niceName').val(userInfo.user_nicename);
}
});
}
//更新用户昵称
function updateNiceName() {
var regInfo = {
"APIKEY": unescape($.cookie("user_authkey")),
"Data": {
"user_authkey": unescape($.cookie("user_authkey")),
"user_nicename": $('#niceName').val(),
}
};
var jsonRegInfo = JSON.stringify(regInfo);
$.ajax({
url: 'users.update',
cache: false,
type: 'POST',
asyn: false,
contentType: 'application/json; charset=utf-8',
data: jsonRegInfo,
success: function (flag) {
if (flag == true) {
alert("昵称修改成功");
}
else {
}
},
error: function (msg) {
alert(msg);
}
});
}
//更新用户密码
function updatePassword() {
var regInfo = {
"APIKEY": unescape($.cookie("user_authkey")),
"Data": {
"user_authkey": unescape($.cookie("user_authkey")),
"user_pass": $('#newPwd').val()
}
};
var jsonRegInfo = JSON.stringify(regInfo);
$.ajax({
url: 'users.update',
cache: false,
type: 'POST',
asyn: false,
contentType: 'application/json; charset=utf-8',
data: jsonRegInfo,
success: function (flag) {
if (flag == true) {
alert("密码修改成功");
}
else {
}
},
error: function (msg) {
alert(msg);
}
});
}
</script>
</head>
<body>
<div class="box" style="float:left">
<div class="tagMenu">
<h2 style="text-align:left">用户信息修改</h2>
<ul class="menu">
<li id="TabChangeName">昵称修改</li>
<li id="TabChangePwd">密码修改</li>
</ul>
</div>
<div class="content">
<div id="ItemChangeName" class="layout" style="text-align:left" >
<form method="post" id="nameForm" name="nameForm">
<table>
<tr>
<td><label>用户昵称：</label></td>
<td><input name="niceName" id="niceName" value="" type="text" size="25" /></td>
</tr>
</table>
<input type="button" name="nameSubmit" id="nameSubmit" style="float:left;" value="修改" />
<input type="reset" name="nameReset" id="nameReset" style="float:left;" value="重置" />
</form>
</div>
<div id="ItemChangePwd" class="layout" style="text-align:left" >
<form method="post" id="pwdForm" name="pwdForm">
<table>
<tr>
<td><label>原 密 码：</label></td>
<td><input name="oldPwd" id="oldPwd" value="" type="password" size="26" /></td>
</tr>
<tr>
<td><label>新 密 码：</label></td>
<td><input name="newPwd" id="newPwd" value="" type="password" size="26" /></td>
</tr>
<tr>
<td><label>确认密码：</label></td>
<td><input name="confirmPwd" id="confirmPwd" value="" type="password" size="26" /></td>
</tr>
</table>
<input type="button" name="pwdSubmit" id="pwdSubmit" style="float:left;" value="修改" />
<input type="reset" name="pwdReset" id="pwdReset" style="float:left;" value="重置" />
</form>
</div>
</div>
</div>
</body>
</html>