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. TinyXML2使用教程（转）

    原文转自 http://blog.csdn.net/K346K346/article/details/48750417 1.TinyXML2概述 TinyXML2是simple.small.effic ...

  2. 使用gcc的-finstrument-functions选项进行函数跟踪【转】

    转自:http://blog.csdn.net/jasonchen_gbd/article/details/44044899 版权声明:本文为博主原创文章,转载请附上原博链接. GCC Functio ...

  3. linux .so .a .o 文件

    linux下文件的类型是不依赖于其后缀名的,但一般来讲:.o,是目标文件,相当于windows中的.obj文件.so 为共享库,是shared object,用于动态连接的,和dll差不多.a为静态库 ...

  4. Charger Battery Warning Message 的 改善

    今天與人聊到有關 charger battery safety 的 warning message, 認為說 warning message 真的有起到 保護 user 的作用? 譬如: batter ...

  5. Adoquery的 moveby和GotoBookmark，RecNo

    GotoBookmark 是必须存在的记录,再次返回原来那个记录的位置,但是原来的那个记录必须存在,所以不适合[删除订单后回到原来的位置],因为原来的订单已经不存在了,删除了, moveby(),从当 ...

  6. SourceTree免注册并连码云

    1 在C:\Users\用户\AppData\Local\Atlassian\SourceTree目录下新建 accounts.json 其中AppData是隐藏文件夹 2 输入 [ { " ...

  7. Cesium加载三维倾斜摄影数据

    具体技术来源自论文 基于Cesium的倾斜摄影三维模型Web加载与应用研究. 技术架构图 应用实例 利用一个实际实例来详细说明如何利用Cesium加载倾斜摄影数据,并进行可视化和交互操作. 首先,利用 ...

  8. [Android] 环境配置之Android Studio开发NDK

    分类:Android环境搭建 (14351)  (20) ========================================================作者:qiujuer博客:bl ...

  9. IOS 后台保持连接

    当iphone应用程序进行网络编程时,切到后台后,socket连接会断掉,ios的设计就是这样. 但是好在apple公司也没有那么绝,还是有一些东西可以在后台运行的(backgroundmodes), ...

  10. POJ3592 Instantaneous Transference 强连通+最长路

    题目链接: id=3592">poj3592 题意: 给出一幅n X m的二维地图,每一个格子可能是矿区,障碍,或者传送点 用不同的字符表示: 有一辆矿车从地图的左上角(0,0)出发, ...