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会很少,用户体 ...
随机推荐
- jQuery 事件 - trigger() 方法
<html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...
- wrodcount
PSP2.1 PSP阶段 预估耗时 (分钟) 实际耗时 (分钟) Planning 计划 20 20 · Estimate · 估计这个任务需要多少时间 20 20 Development 开 ...
- Business Trip to Taian
工作必备 电脑.电源(下载好小助手.VPN.个人证书) 手机.充电器 重要参考书籍 生活用品 衣服,夏天体恤为主,别忘了加件外套 被罩.床单和枕巾 牙刷牙膏肥皂之类的必带,中号浴巾一条 拖鞋要不要? ...
- appium自动化安装(一)
1.首先去 https://github.com/ 了解一下appium一些相关信息 2.安装node.js:node.js官方网站:https://nodejs.org/ 安装完成,打开Wind ...
- 《Linux内核设计与实现》读书笔记(五)- 系统调用
主要内容: 什么是系统调用 Linux上的系统调用实现原理 一个简单的系统调用的实现 1. 什么是系统调用 简单来说,系统调用就是用户程序和硬件设备之间的桥梁. 用户程序在需要的时候,通过系统调用来使 ...
- i++,++i,i+=1,i = i+1在C++中的区别
其实这个问题可以从三个角度去分析:语言规范,编译器实现,CPU支持.首先从语言规范上来讲:前置++和后置++是不等价的,前置++在规范中明确指出 和+=组合操作符是等价的,但和E = E+1;这样的赋 ...
- 遍历一个二维数组的简便方法(减少foreach次数)
在一些特定场合可以使用下, 还是有局限性 输出结果 : 另一种场景 : 输出结果 : 更复杂的场景 : 输出结果 :
- C#内存映射大文件并使用Marshal解析结构体信息
内存映射数据处理类主要函数及变量如下: string _filepath; /// <summary> /// 引用内存映射文件 /// </summary> private ...
- AppDelegate生命周期回调顺序
1. 应用初次启动: - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDiction ...
- go语言入门教程百度网盘 mysql图形化操作与数据导入
mysql图形化操作与数据导入 @author:Davie 版权所有:北京千锋互联科技有限公司 数据库存储技术 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库.每个数据库都有一个 ...