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