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. 转 Python——UnicodeEncodeError: 'ascii' codec can't encode/decode characters

    转自: http://blog.csdn.net/zuyi532/article/details/8851316 我是写爬虫的时候遇到的问题,百度了一下,先贴解决方案: 在代码中加入: import ...

  2. FNV与FNV-1a Hash算法说明【转】

    转自:http://blog.csdn.net/jiayanhui2877/article/details/12090575 The core of the FNV hash The core of ...

  3. linux 下高精度时间

    今天在公司代码中看到了使用select函数的超时功能作定时器的用法,便整理了如下几个Linux下的微秒级别的定时器.在我的Ubutu10.10 双核环境中,编译通过. /* * @FileName:  ...

  4. Scrapy学习-16-动态网页技术

    Selenium浏览器自动化测试框架 简介 Selenium 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样. 支持的浏览器包括IE(7, 8, ...

  5. fork（）函数的执行过程、孤儿进程和僵尸进程

    说起fork就不得不提COW(Copy On Write),就是“写时拷贝”.也就是当fork发生时,子进程根本不会去拷贝父进程的内存页面,而是与父进程共享.当子进程或父进程需要修改一个内存页面时,L ...

  6. 转Yii框架radioButtonlist水平横排及去除除换行符号

    横排: echo $form->radiobuttonlist($model, ‘type’,$arrtype,array(‘template’ => ‘<li style=”dis ...

  7. JD静态网页

    1.制作导航栏 ul>li*n>a 2.制作竖线 a.利用border b.利用  | c.利用矩形,宽度设为1,设置背景色,padding = 0 3.制作下三角 (1)◇ (2)两个盒 ...

  8. UPLINK口

    为什么我买的交换机没有UPLINK口? UPLINK端口的作用是为了解决网络设备互连时的网线(交叉线和直通线)的使用问题.现在新出的交换机有的是没有UPLINK口的,没有UPLINK口的交换机的每个端 ...

  9. 邁向IT專家成功之路的三十則鐵律 鐵律二十三：IT人的成家之道-樸實

    根據內政部一份2013年最新的調查報告指出台灣人的離婚率位居全球第三,想想看如果這是經濟成長率的排名表現那該有多好.然而究竟為何在台灣這塊小小的土地上,不僅離婚非常高而且晚婚的人也非常的多,其原因肯定 ...

  10. Git 的使用Git Bash和Git GUI

    使用Github也有一年的时间了,之前一直都是使用的Github客户端,对提交,更新,克隆,合并,分支有一定的了解和实践.一直都想试试命令行的形式,但是感觉可能桌面版的方便就没有做. 可是Github ...