jquery.validate ajax提交
页面引入jquery.validate.min.js
<style> //引入错误格式
label.error {
display: block;
margin-left: 1em;
width: auto;
color: red;
}
</style><script type="text/javascript" src="/library/js/jquery.validate.min.js"></script>
要验证的form,必须是form表单,提交不提交的无所谓
<form target="hiddenIframe" id="content">
<div class="modal-body" style="margin-left:110px;">
<label style="float:left" for="fieldType">①字段类型<span style="color:red">*</span>:</label>
<input style="float:left;margin-left:40px;" type="text" name="fieldType" id="fieldType"/>
<br>
<br>
<label style="float:left" for="intro">②字段名称<span style="color:red">*</span>:</label>
<input style="float:left;margin-left:39px;" type="text" name="fieldName" id="fieldName"/>
<br/>
<br/>
<label style="float:left" for="orderNumber">③排序(数字):</label>
<input style="float:left;margin-left:6px;" type="text" name="orderNumber" id="orderNumber"/>
<br/>
<br/>
<label style="float:left" for="isDisable">④使用情况:</label>
<input type="radio" name="isDisable" value="0"/>禁用
<input type="radio" name="isDisable" value="1" checked/>启用
<br/>
<br/>
<label style="float:left" for="remark">⑤备注:</label><br>
<textarea rows="6" cols="40" name="remark" id="remark"></textarea>
<br>
<br>
<div class="error">error:</div> //--------错误显示地方
</div>
<div class="modal-footer">
<input id="insertField" type="button" style="margin-left: 150px;margin-top: 20px;" value="新增数据字典" class="btn btn-primary"></a>
<input type="button" style="margin-left: 150px;margin-top: 20px;" value="取消" class="btn btn-primary" data-dismiss="modal" onclick="javascript:window.location.reload();"></a>
<iframe name="hiddenIframe" id="hiddenIframe" style="display:none"></iframe>
</div>
</form>
js中如下:
//验证方法
function valContent(){
return $("#content").validate({
errorLabelContainer: $("#content div.error"),
rules: {
fieldName: { //fieldName 是页面的name属性
required: true
},
orderNumber:{
number: true,
digits: true,
min :0
}
},
messages: {
fieldName: {
required: "请填写字段名称"
},
orderNumber:{
number: "请输入合法的排序数字",
digits: "排序只能输入整数",
min :$.validator.format("不能小于0")
}
}
}).form();
}
发送的ajax请求如下:
//新增数据字典
$("#insertField").click(function(){
var fieldType = $("#fieldType").val();
var fieldName = $("#fieldName").val();
var orderNumber = $("#orderNumber").val();
var isDisable = $("input[type='radio']:checked").val();
var remark = $("#remark").val();
if(valContent()){
$.post(ctx+"/field/insert",{fieldType:fieldType,fieldName:fieldName,orderNumber:orderNumber,isDisable:isDisable,remark:remark},function(msg){
if(msg.success){
$("#myModal").modal('toggle');
loadSignIn();
}
});
}
});
jquery.validate ajax提交的更多相关文章
- 今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式
今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...
- jquery实现ajax提交form表单的方法总结
本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一: function AddHandlingFeeToRefund( ...
- jQuery Validate Ajax 验证
jQuery Validate Ajax 验证 <script type="text/javascript"> $(function() { $('#formCityL ...
- jquery实现ajax提交表单信息
最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习jquery,基本上是现学现找,有点困难. 主要是扩展和拼接json转对象 很简单,附上代码: ; ...
- jquery validate ajax submit form
when the jquery validation plugin is used for validating the form data, such as below: html code: &l ...
- jquery实现ajax提交表单
一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...
- php使用jquery Form ajax 提交表单,并上传文件
在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交. 一.jquery.form.js下载地址 ...
- jquery.validate ajax方式验证
在做网站的时候有一块需要用到jquery.validate插件 ajax方式的方式来验证原始密码是否正确,研究了研究加上博客园朋友的帮助,终于实现了.贴出代码 <script type=&quo ...
- jquery validate submitHandler 提交导致死循环
dom对像的提交form.submit();和jquery对像的提交$('').submit();功能上是没有什么区别的.但是如果用了jquery validate插件,提交时这二个就区别大了.$(' ...
随机推荐
- oracle 中的trunc()函数及加一个月,一天,一小时,一分钟,一秒钟方法
返回处理后的数据,不同于round()(对数值进行四舍五入处理),该函数不对指定小数前或后的数值部分进行舍入处理. 语法:trunc(number[,decimals]) 其中,number为待做处理 ...
- [译]Introducing ASP.NET 5
原文:http://weblogs.asp.net/scottgu/introducing-asp-net-5 ASP.NET 5预览版发布了, 可以在这下载最新的Visual Studio 2015 ...
- HDOJ 4751 Divide Groups
染色判断二分图+补图 比赛的时候题意居然是反的,看了半天样例都看不懂 .... Divide Groups Time Limit: 2000/1000 MS (Java/Others) Memo ...
- 支付安全基础 —— HTTPS的故事
本文主要讲述了HTTPS的基本原理,通过HTTPS握手过程.证书链.中间人攻击.CA机构等问题,详细解释了百付宝系统中用到的HTTPS安全知识,同时,介绍了如何查看www.baifubao.com的 ...
- Redhat EL安装curses
1.下载curses安装包 http://ftp.gnu.org/pub/gnu/ncurses/ncurses-5.6.tar.gz2. tar -zxvf nurses-5.6.tar.gz 3 ...
- iOS开发——UI进阶篇(八)pickerView简单使用,通过storyboard加载控制器,注册界面,通过xib创建控制器,控制器的view创建,导航控制器的基本使用
一.pickerView简单使用 1.UIPickerViewDataSource 这两个方法必须实现 // 返回有多少列 - (NSInteger)numberOfComponentsInPicke ...
- 常用的Git Tips
导读 Git被越来越多的公司使用,因此我们需要了解Git使用过程中的一些技巧. 一.Configuration:配置 列举所有的别名与配置 git config --list Git 别名配置 git ...
- 剑指Offer 栈的压入、弹出序列
题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈序 ...
- 剑指Offer 从尾到头打印链表
题目描述 输入一个链表,从尾到头打印链表每个节点的值. 输入描述: 输入为链表的表头 输出描述: 输出为需要打印的“新链表”的表头 思路: 用容器vector,递归到最后一个元素,push_back到 ...
- Spatial pyramid pooling (SPP)-net (空间金字塔池化)笔记(转)
在学习r-cnn系列时,一直看到SPP-net的身影,许多有疑问的地方在这篇论文里找到了答案. 论文:Spatial Pyramid Pooling in Deep Convolutional Net ...