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"}); }


 
原文地址:https://www.cnblogs.com/wei-dong/p/6141907.html