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"});
}
ace+validate表单验证(两种方法)的更多相关文章
- 使用js提交form表单的两种方法
提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...
- spring mvc 防止重复提交表单的两种方法,推荐第二种
第一种方法:判断session中保存的token 比较麻烦,每次在提交表单时都必须传入上次的token.而且当一个页面使用ajax时,多个表单提交就会有问题. 注解Token代码: package c ...
- Django 构建模板form表单的两种方法
通常情况下,我们想构建一张表单时会在模板文件login.html中写入 <form action="/your-name/" method="post"& ...
- 利用JS提交表单的几种方法和验证(必看篇)
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- 【干货】Laravel --Validate (表单验证) 使用实例
前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验 ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
随机推荐
- CLRMonitor - 跟踪CLR内部执行过程工具
CLRMonitor v1.0.1511.13 点击此处下载 软件介绍:这款软件主要用于跟踪CLR内部执行过程,定位当前程序执行的命名空间以及方法名等信息.可以迅速找到被跟踪程序的当前执行方法名.本软 ...
- Excel神技能
按住ALT再按数字41420就可打对号 按住ALT再按数字41409就可打叉号
- python开发[第二篇]------str的7个必须掌握的方法以及五个常用方法
在Python中 基本数据类型有 str int boolean list dict tuple等 其中str的相关方法有30多个 但是常用的就以下7个 join # split # find # ...
- 关于css js文件缓存问题
什么情况下,要禁止静态文件缓存:1.经常可能要改动的 js, css.比如一个js文件引用如下<script src="test.js"></script> ...
- springcloud中通过Filter实现微服务跨域访问允许
import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.an ...
- .NET 一般处理程序使用Session
.ashx中引用 session必须 using System.Web.SessionState ,继承IReadOnlySessionState/IRequiresSessionState IRea ...
- Sql Server 数据恢复-破解版
首先,恭喜大家进了误删误改使得数据丢失的坑~~~~~ 不要担心,恢复就好了. 下载地址:https://pan.baidu.com/s/1a59U--Y6EmbPF2CFsxmo2Q 密码:jb14 ...
- java7大设计原则
1.单一职责原则(srp) 每一个对象或者类只有一个职责.高内聚.低耦合. 2.开闭原则(ocp) 对扩展开放,对修改关闭.使用性,灵活性,扩展性,稳定性延续性,重复.维护. 3.里氏替换原则(lsp ...
- 微信小程序小结(4) -- 分包加载及小程序间跳转
分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载(主要是空间不够用,哈哈~). 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中 ...
- json互转笔记
JSON.parse()与JSON.stringify()的区别 JSON.parse()[从一个字符串中解析出json对象] 例子: //定义一个字符串 var data='{"name& ...