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插件,提交时这二个就区别大了.$(' ...
随机推荐
- golang笔记——IDE
可选方案有 Lite IDE\GoSublime\Visual Studio Code\Goclipse\Vim 1.Lite IDE 这是国人开发的开源且跨平台的 golang 专属IDE,也算是目 ...
- 大熊君大话NodeJS之------Http模块
一,开篇分析 首先“Http”这个概念大家应该比较熟悉了,它不是基于特定语言的,是一个通用的应用层协议,不同语言有不同的实现细节,但是万变不离其宗,思想是相同的, NodeJS作为一个宿主运行环境,以 ...
- WCF 已知类型和泛型解析程序 KnownType
数据协定继承 已知类型和泛型解析程序 Juval Lowy 下载代码示例 自首次发布以来,Windows Communication Foundation (WCF) 开发人员便必须处理数据协定继承方 ...
- 【AngularJS】—— 11 指令的交互
前面基本了解了指令的相关内容: 1 如何自定义指令 2 指令的复用 本篇看一下指令之间如何交互.学习内容来自<慕课网 指令3> 背景介绍 这例子是视频中的例子,有一个动感超人,有三种能力, ...
- mac jdk环境变量
/System/Library/Java/JavaVirtualMachines/1.6.0.jdk /Library/Java/JavaVirtualMachines/jdk1.7.0_71.jdk ...
- Codeforces Round #270 1001
Codeforces Round #270 1001 A. Design Tutorial: Learn from Math time limit per test 1 second memory l ...
- 【C语言入门教程】2.7 表达式
表达式由运算符.常量及变量构成,C语言的表达式基本遵循一般代数规则.有几种运算法则是 C 语言表达式特有的. 2.7.1 表达式中的类型转换 同一表达式中的不同类型常量及变量在运算时需要变量为同一数据 ...
- HDU 1086You can Solve a Geometry Problem too(判断两条选段是否有交点)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1086 判断两条线段是否有交点,我用的是跨立实验法: 两条线段分别是A1到B1,A2到B2,很显然,如果 ...
- HDU 4923 Room and Moor
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4923 解题报告:给出一个长度为n的只包含0和1的序列,是否存在一个序列Bi满足一下条件: 1. ...
- c++ 字符串流 sstream(常用于格式转换) 【转载】
使用stringstream对象简化类型转换C++标准库中的<sstream>提供了比ANSI C的<stdio.h>更高级的一些功能,即单纯性.类型安全和可扩展性.在本文中, ...