zoukankan      html  css  js  c++  java
  • ace+validate表单验证(两种方法)

    //修改密码(直接在validate中验证提交)
                    $("#changePassword").on(ace.click_event, function() {
                        var html = "";
                            html += "<div class='changePw'><h1>修改密码</h1></div>";
                            html += "<div class='row'><div class='col-xs-12'><form name='edit-password' class='form-horizontal' role='form'>";
                            html += "<div class='form-group'><label class='col-sm-3 control-label no-padding-right'> 用户名 </label>";
                            html += "<div class='col-sm-9 userName'>${userMsg.userName}";
                            html += "</div></div>";
                            html += "<div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='form-field-1'> 旧密码 </label>";
                            html += "<div class='col-sm-9'><input id='form-field-1' name='oldPassword' placeholder='旧密码' class='col-xs-10' type='password'>";
                            html += "</div></div>";
                            html += "<div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='form-field-2'> 新密码 </label>";
                            html += "<div class='col-sm-9'><input id='form-field-2' name='password' placeholder='新密码' class='col-xs-10' type='password'>";
                            html += "</div></div>";
                            html += "<div class='form-group'><label class='col-sm-3 control-label no-padding-right' for='form-field-3'> 确认新密码 </label>";
                            html += "<div class='col-sm-9'><input id='form-field-3' name='rePassword' placeholder='确认新密码' class='col-xs-10' type='password'>";
                            html += "</div></div>";
                            html += "<div class='clearfix'><div class='col-md-offset-3 col-md-9'>";
                            html += "<button class='btn btn-info' type='submit'><i class='ace-icon fa fa-check bigger-110'></i>修改密码</button></div></div>";
                            html += "</form></div></div>";
                        bootbox.dialog({
                            message: html
                        });
                        /*表单验证  */
                        $("form[name='edit-password']").validate({
                            rules: {
                                oldPassword: {
                                    required: true
                                },
                                password: {
                                    required: true
                                },
                                rePassword: {
                                    required: true,
                                    equalTo: 'form[name="edit-password"] input[name="password"]'
                                }
                            },
                            messages: {
                                oldPassword: {
                                    required: '旧的密码必须填写',
                                },
                                password: {
                                    required: '新的密码必须填写'
                                },
                                rePassword: {
                                    required: '确认密码必须填写',
                                    equalTo: '两次密码输入不一致,请重新输入'
                                }
                            },
                            submitHandler: function (form) {
                                var $form = $(form);
                                 console.log( $form.serializeArray());
                                $.ajax({
                                    type: "POST",
                                    url: 'admin/user/updatePassWord',
                                    data: $form.serializeArray(),
                                    beforeSend: function () {
                                        $form.find(':submit').prop('disabled', true);
                                    },
                                    success: function (json) {
                                        if(json.errmsg == 1) {
                                            swal({
                                                title: "旧密码不正确",
                                                html: false,
                                                text: "请重新输入旧密码",
                                                type: "error",
                                                showCancelButton: false,
                                                confirmButtonText: "确定",
                                                closeOnConfirm: true
                                            })
                                            return;
                                        }
                                        swal({
                                            title: "修改成功",
                                            html: false,
                                            text: "密码修改成功,下次登录将使用新的密码",
                                            type: "success",
                                            showCancelButton: false,
                                            confirmButtonText: "确定",
                                            closeOnConfirm: true
                                        }).then(function () {
                                           window.location.href = "admin/index?"+Math.random();
                                        });
                                    },
                                    complete: function () {
                                        $form.find(':submit').prop('disabled', false);
                                    }
                                });
                            }
                        });
                    });

    //第二种方法   不提交先验证   在ifram外面验证
    $(function() { /*表单验证 */ $("form[name='edit-password']").validate({ rules: { oldPassword: { required: true }, password: { required: true }, rePassword: { required: true, equalTo: 'form[name="edit-password"] input[name="password"]' } }, messages: { oldPassword: { required: '旧的密码必须填写', }, password: { required: '新的密码必须填写' }, rePassword: { required: '确认密码必须填写', equalTo: '两次密码输入不一致,请重新输入' } } }); }); //数据提交 function getSubmitData(){ var rtnTag = "none"; var $form = $("form[name='edit-password']"); if($form.valid()){ $.ajax({ type : "POST", url : 'admin/user/updatePassWord', data : $form.serialize(), async: false, success : function(json) { rtnTag = json.errmsg; } }); } return rtnTag; } //ifram框架 加bootbox插件 //修改密码 function changePassword(){ bootbox.confirm({ title: '<i class="ace-icon fa fa-key"></i> 修改密码', message: '<iframe id="changePW" src="${ctx}/admin/user/getResetPassWord" frameborder="no" border="0" style=" 100%; min-height: 256px;"></iframe>', buttons: { confirm: { label: '<i class="fa fa-check"></i> 修改密码' }, cancel: { label: '<i class="fa fa-times"></i> 取消' } }, callback: function (result) { var $fhBtn = $(".modal-footer").find(".btn-primary"); if (result){ $fhBtn.prop('disabled', false); var rtnTag = $("#changePW")[0].contentWindow.getSubmitData(); //取到ifram内部方法 if(rtnTag=="none"){ return false; }else if(rtnTag=="1"){ bootbox.alert({title: "新旧密码一致",message: "请输入与旧密码不一致的新密码",size: 'small'}); var $okBtn = $(".modal-footer").find("button[type='button']"); $okBtn.html("确定"); return false; }else if(rtnTag=="2"){ bootbox.alert({title: "旧密码不正确",message: "请重新输入旧密码",size: 'small'}); var $okBtn = $(".modal-footer").find("button[type='button']"); $okBtn.html("确定"); return false; }else { bootbox.alert({title: "修改成功",message: "密码修改成功,下次登录将使用新的密码",size: 'small'}); var $okBtn = $(".modal-footer").find("button[type='button']"); $okBtn.html("确定"); } $fhBtn.prop('disabled', true); } } }); var $fhBtn = $(".modal-footer").find(".btn-default"); $fhBtn.css({"float":"right", "margin-left":"10px"}); }
    
    
    
     
  • 相关阅读:
    51单片机数码管字符H自右向左移动
    51单片机点亮双向流水灯
    React 动态增减表单项
    React--Tree 点击节点收缩
    Redis 操作异常
    Linxu 后台运行
    vert.x学习(四),使用模板解析器ClassLoaderTemplateResolver
    vert.x学习(三),Web开发之Thymeleaf模板的使用
    vert.x学习(二),使用Router来定义用户访问路径
    vert.x学习(一),开篇之hello world
  • 原文地址:https://www.cnblogs.com/wei-dong/p/6141907.html
Copyright © 2011-2022 走看看