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会很少,用户体 ...
随机推荐
- clions的使用
最近无聊玩了下CLion这个IDE,顺便学习了下CMAKE怎么使用.话说CLion的CMAKE的支持还不是特别的完好,和命令行模式还有有区别,有如下几个问题: 1:CMAKE的编译目录不能指定,而是I ...
- HTML完全使用详解 PDF扫描版
<HTML完全使用详解>根据网页制作的实际特点和目前市场需要,全面系统地介绍了最新的HTML4.01.丰富的实例贯穿全书,能帮助您全面掌握HTML,而且本书所有实例均可直接修改使用,可以提 ...
- C#面向对象之三大特性: 封装
学到封装就会想到访问修饰符,说到访问修饰符,就会想到访问等级,或者说是访问能力的大小.当然也少不了默认的访问类型. C# 方法默认访问级别 : private (私有的) C# 类默认访问级别 : i ...
- .net core webapi +ddd(领域驱动)+nlog配置+swagger配置 学习笔记(1)
搭建一个.net core webapi项目 在开始之前,请先安装最新版本的VS2017,以及最新的.net core 2.1. 首先创建一个Asp.Net Core Web应用程序 这个应用程序是 ...
- luogu P3811线性求逆元
首先扩O:T了一个点(因为上界松),83分. #include <cstdio> using namespace std; int n, p; void exgcd(int a, int ...
- #6432. 「PKUSC2018」真实排名(组合数学)
题面 传送门 题解 这数据范围--这输出大小--这模数--太有迷惑性了-- 首先对于\(0\)来说,不管怎么选它们的排名都不会变,这个先特判掉 对于一个\(a_i\)来说,如果它不选,那么所有大于等于 ...
- [51nod1239] 欧拉函数之和(杜教筛)
题面 传送门 题解 话说--就一个杜教筛--刚才那道拿过来改几行就行了-- //minamoto #include<bits/stdc++.h> #define R register #d ...
- pg10.1 orafce3.6 安装
安装unzip orafce-mastermv orafce-master /opt/soft_bak/postgresql-10.1/contribcd /opt/soft_bak/postgres ...
- luogu2155 [SDOI2008]沙拉公主的困惑
link 求出1到N的阶乘中与M的阶乘互质的数的个数,对R取模,多组询问,R<=10^9+10,T<=10000,1 < = N , M < = 10000000 1到\(M! ...
- luogu1900 自我数
分享一个非正解的做法 本题解内存最低(\(\le1\rm MiB\)) 但是不开O2会tle 思路:每个数字仅会更新出1个新的数字,而且这个新数字比旧数字最多也就大70多.所以这里还是利用" ...