1、效果

说明:1、界面不太美观 这里面主要是包括 利用jQuery 插件validate验证form字段,jQuery提交form表单的方式

1、HTML代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="Easyui/themes/default/easyui.css" rel="stylesheet" />
<link href="Easyui/themes/icon.css" rel="stylesheet" />
<script src="Easyui/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="Easyui/jquery.easyui.min.js"></script>
<script src="Easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="JS/jquery.validate.min.js"></script>
<script src="JS/jquery.form.js"></script>
<style type="text/css">
.div1
{
width:350px;
height:160px;
}
td
{
text-align:right;
}
.input1
{
width:180px;
}
</style> </head>
<body>
<form id="form1" runat="server">
<input type="hidden" name="userId" value=""/>
<div class="div1">
<table>
<tr><td>用户名:</td><td><input class="input1" type="text" id="userName" name="userName" value="" /></td></tr>
<tr><td>旧密码:</td><td><input class="input1" type="password" id="pwd" name="pwd" value="" /></td></tr>
<tr><td>新密码:</td><td><input class="input1" type="password" id="NewPwd" name="NewPwd" value="" /></td></tr>
<tr><td>确认新密码:</td><td><input class="input1" type="password" id="confirmPwd" name="confirmPwd" value="" /></td></tr>
<tr><td id="btnCaoZuo" style="padding-right:20px;width:160px;" colspan="2">
<input type="button" style="width:80px;margin-right:15px;" onclick="test()" value ="保存" />
<input type="button" style="width:80px;" value="取消" /></td></tr>
</table>
</div>
</form>
</body>
</html>
<script type="text/javascript"> function check_form() { return $("#form1").validate({
rules: {
userName: {
required: true,
minlength: 2
},
NewPwd: {
required: true,
minlength: 6,
maxlength: 20,
},
confirmPwd: {
required: true,
minlength: 6,
maxlength: 20,
equalTo: "#NewPwd"
} },
messages: {
userName: {
required: "请输入用户名",
minlength: "用户名必需由两个字母组成"
},
NewPwd: {
required: "请输入密码",
minlength: "密码长度不能小于 6 个字母",
maxlength: "密码长度不能多于 20 个字母",
},
confirmPwd: {
required: "请输入密码",
minlength: "密码长度不能小于 6 个字母",
maxlength: "密码长度不能多于 20 个字母",
equalTo: "两次密码输入不一致"
} }
});
}
function test()
{
if (check_form().form()) {
var f = $('#form1');
f.form('submit', {
url: 'Home/ChangePWD',
type: 'post',
success: function (data) {
var json = $.parseJSON(data);
if (json.id == 1) { } },
error: function (data) { } });
return true; } else { return false; } }
</script>

2、Home控制器 代码

        public ActionResult ChangePWD()
{
ResultModel re = new ResultModel();
string userName = Request["userName"].ToString();
re.id = ;
re.stName = "修改成功!";
return Json(re, JsonRequestBehavior.AllowGet);
}

3、引用的Easyui 及js源文件下载地址

链接:https://pan.baidu.com/s/1UDrd5KKB4kN3tN_0CotA4A 密码:tctv

asp.net mvc4 修改密码界面的更多相关文章

  1. Dynamics CRM修改密码界面

    我们再实施Dynamics CRM的过程中经常会被客户吐槽没有一个修改密码的页面.市面上也有一些人通过自己操作AD库进行修改密码的解决方案不过多多少少会有一些BUG存在.其实ADFS提供了一个修改密码 ...

  2. asp.net membership 修改密码

    aspnet_Applications 存储数据库所涉及应用程序有关信息. aspnet_Membership 存储与用户相关信息例如:用户登陆密码,创建时间. aspnet_Paths 存储应用程序 ...

  3. winform设计一个登录界面和修改密码的界面-自动切换窗体(问题[已解] 望一起讨论)(技术改变世界-cnblog)

    http://www.cnblogs.com/IAmBetter/archive/2012/01/14/2322156.html winform设计一个登录界面和修改密码的界面-自动切换窗体(问题[已 ...

  4. C#_会员管理系统:开发三(修改密码)

    为以后多个功能界面考虑,新增一个主界面: 主界面如下: 主界面(VIPMain.cs)详细代码如下: using System; using System.Collections.Generic; u ...

  5. 31、Flask实战第31天:cms后台修改密码

    cms后台修改密码界面布局 先创建cms_resetpwd.html页面,继承cms_base.html {% extends 'cms/cms_base.html' %} {% block titl ...

  6. vue-element添加修改密码弹窗

    1.新建修改密码vue文件CgPwd.vue 代码如下: <template> <!-- 修改密码界面 --> <el-dialog :title="$t('c ...

  7. 在ASP.NET MVC4中实现同页面增删改查,无弹出框02,增删改查界面设计

    在上一篇"在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建"中,已经搭建好了Repository层,本篇就剩下增删改查的界面了......今 ...

  8. asp.net mvc4 登录界面

    说明:开发环境 asp.net mvc4 c#语言 1.项目目录结构 2.Login控制器中 public ActionResult Index() { return View(); } 对应Inde ...

  9. ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分(3)修改资料、修改密码

    在上一篇博客中实现了用户的注销和登录,其实代码里落了点东西,就是用户登录要更新最后一次登录时间和登录IP,这次补上.今天做修改资料和修改密码,TryUpdateModel是新用到的东西. 目录: AS ...

随机推荐

  1. word文档的导出(用freemarker模板导出)(桃)

    1.将要导出的word文档另存为xml格式的 2.用文档编辑器打开(如:notepad++),将要展示的数据用${name}的形式替换,“name”对应数据库中的字段 3.根据模板生成 package ...

  2. Metasploit笔记之信息收集命令

    书籍参考:Metasploit渗透指南 Nmap:使用没有时 ubuntu自动提示安装命令 用法: nmap -sS -Pn  192.168.1.0 -sS:执行一次隐秘的tcp扫描 -Pn:不使用 ...

  3. 【MFC】MFC中使对话框变成圆角矩形的代码(转)

    原文转自 http://blog.csdn.net/cracent/article/details/48274469 BOOL CLoginDlg::OnInitDialog() { CDialog: ...

  4. 内核的bootmem内存分配器【转】

    转自:http://blog.csdn.net/zmxiangde_88/article/details/8041040 版权声明:本文为博主原创文章,未经博主允许不得转载. 在内核启动期间,伙伴系统 ...

  5. Codeforces Gym 100203H Highways 最小生成树

    原题链接:http://codeforces.com/gym/100203/attachments/download/1702/statements.pdf 题解 给你平面上若干点,生成一颗完全图,让 ...

  6. Java 对象的序列化、反序列化

    对象的序列化(Serialize):将内存中的Java对象转换为与平台无关的二进制流(字节序列),然后存储在磁盘文件中,或通过网络传输给另一个网络节点. 对象的反序列化(Deserialize):获取 ...

  7. Java中Javadoc的{@link}与@see的简单区别

    {@link}与@see这两个Javadoc注解都可以直接链接类和方法.用法基本一致. 但是@see必须顶头写,而{@link可以任意地方},如下所示: 参考: http://blog.csdn.ne ...

  8. Android Service实现双向通信(一)

    首先,大概来总结一下与Service的通信方式有很多种: 通过BroadCastReceiver:这种方式是最简单的,只能用来交换简单的数据: 通过Messager:这种方式是通过一个传递一个Mess ...

  9. iOS -- SKEmitterNode类

      SKEmitterNode类 继承自 SKNode:UIResponder:NSObject 符合 NSCoding(SKNode)NSCopying(SKNode)NSObject(NSObje ...

  10. ann搜索算法(Approximate Nearest Neighbor)

    ANN的方法分为三大类:基于树的方法.哈希方法.矢量量化方法.brute-force搜索的方式是在全空间进行搜索,为了加快查找的速度,几乎所有的ANN方法都是通过对全空间分割,将其分割成很多小的子空间 ...