打赏

asp.net mvc4 修改密码界面

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 = 0;
            re.stName = "修改成功！";
            return Json(re, JsonRequestBehavior.AllowGet);
        }
View Code

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

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

posted @ 2019-01-09 13:34  学习靠自己  阅读(1903)  评论(0)  编辑  收藏  举报