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. [Codeforces Round #297 Div. 2] E. Anya and Cubes

    http://codeforces.com/contest/525/problem/E 学习了传说中的折半DFS/双向DFS 先搜前一半数,记录结果,然后再搜后一半数,匹配之前结果. #include ...

  2. 【Visual Studio】Visual Studio 2015快捷键设置问题 alt+ F8 （转）

    具体修改方法如下: 工具-选项-环境-键盘-应用以下其他键盘映射方案,选择visual C++6, 然后编代码试试,嘿,我的alt+F8回来了(否则是ctrl + k, ctrl + f); 原文转自 ...

  3. [TL-WR845N V4] 无线桥接（WDS）设置 + 迅捷桥接配置

    官方文章转载备忘: http://service.tp-link.com.cn/detail_article_697.html?spm=a220o.1000855.0.0.eTMbmU 迅捷桥接配置: ...

  4. LeetCode OJ--Permutation Sequence *

    求第k个排列. 刚开始按照一个排列一个排列的求,超时. 于是演算了一下,发下有数学规律,其实就是康托解码. 康托展开:全排列到一个自然数的双射 X=an*(n-1)!+an-1*(n-2)!+...+ ...

  5. 微信小程序 wx.navigateTo()传参及多个参数方法

    var workModeAndPriceList = res.data.data.workModeAndPriceList; //var result = JSON.stringify(workMod ...

  6. 2017 ACM-ICPC 沈阳区域赛记录

    出发日 中午坐大巴前往萧山机场. 哇开心又可以坐飞机了 飞机延误了.在候机大厅里十分无聊,先用机场的电脑玩了会小游戏 然后偷偷切了2个水题 (什么编译器IDE都没有,只能记事本了) 飞机上什么东西都没 ...

  7. Java---详解方法传值问题

    过程解析: 1.首先执行int[] arr={3,5,6,1,7,9,0},遇到数组先执行等式右边的,{3,5,6,1,7,9,0}会在堆内存中开辟一块空间,分成7小块,下标分别从0~6,先进行系统初 ...

  8. netty-类图对比

  9. Codeforces 235 C

    题目大意 给定一个模板串, 再给出\(n\)个询问, 询问每一个串的循环串总共在原串中出现了多少次. 循环串: 比如说有\(str[] = \{ABCD\}\), 则其循环串有\(\{ABCD\}, ...

  10. Java定义接口变量为接收类型有什么好处（面向接口编程）

    个人理解:定义接口变量为接收类型属于面向接口的编程,通过接口的抽象能减少类之间的耦合,增加可复用性. 面向接口编程: 一种规范约束 制定者(或者叫协调者),实现者(或者叫生产者),调用者(或者叫消费者 ...