页面引入jquery.validate.min.js

  1. <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表单,提交不提交的无所谓

  1. <form target="hiddenIframe" id="content">
  2. <div class="modal-body" style="margin-left:110px;">
  3. <label style="float:left" for="fieldType">①字段类型<span style="color:red">*</span>:</label>
  4. <input style="float:left;margin-left:40px;" type="text" name="fieldType" id="fieldType"/>
  5. <br>
  6. <br>
  7. <label style="float:left" for="intro">②字段名称<span style="color:red">*</span>:</label>
  8. <input style="float:left;margin-left:39px;" type="text" name="fieldName" id="fieldName"/>
  9. <br/>
  10. <br/>
  11. <label style="float:left" for="orderNumber">③排序(数字):</label>
  12. <input style="float:left;margin-left:6px;" type="text" name="orderNumber" id="orderNumber"/>
  13. <br/>
  14. <br/>
  15. <label style="float:left" for="isDisable">④使用情况:</label>
  16. <input type="radio" name="isDisable" value="0"/>禁用
  17. <input type="radio" name="isDisable" value="1" checked/>启用
  18. <br/>
  19. <br/>
  20. <label style="float:left" for="remark">⑤备注:</label><br>
  21. <textarea rows="6" cols="40" name="remark" id="remark"></textarea>
  22. <br>
  23. <br>
  24. <div class="error">error:</div> //--------错误显示地方
  25. </div>
  26. <div class="modal-footer">
  27. <input id="insertField" type="button" style="margin-left: 150px;margin-top: 20px;" value="新增数据字典" class="btn btn-primary"></a>
  28. <input type="button" style="margin-left: 150px;margin-top: 20px;" value="取消" class="btn btn-primary" data-dismiss="modal" onclick="javascript:window.location.reload();"></a>
  29. <iframe name="hiddenIframe" id="hiddenIframe" style="display:none"></iframe>
  30. </div>
  31. </form>

js中如下:

  1. //验证方法
  2. function valContent(){
  3. return $("#content").validate({
  4. errorLabelContainer: $("#content div.error"),
  5. rules: {
  6. fieldName: { //fieldName 是页面的name属性
  7. required: true
  8. },
  9. orderNumber:{
  10. number: true,
  11. digits: true,
  12. min :0
  13. }
  14. },
  15. messages: {
  16. fieldName: {
  17. required: "请填写字段名称"
  18. },
  19. orderNumber:{
  20. number: "请输入合法的排序数字",
  21. digits: "排序只能输入整数",
  22. min :$.validator.format("不能小于0")
  23. }
  24. }
  25. }).form();
  26. }

发送的ajax请求如下:

  1. //新增数据字典
  2. $("#insertField").click(function(){
  3. var fieldType = $("#fieldType").val();
  4. var fieldName = $("#fieldName").val();
  5. var orderNumber = $("#orderNumber").val();
  6. var isDisable = $("input[type='radio']:checked").val();
  7. var remark = $("#remark").val();
  8. if(valContent()){
  9. $.post(ctx+"/field/insert",{fieldType:fieldType,fieldName:fieldName,orderNumber:orderNumber,isDisable:isDisable,remark:remark},function(msg){
  10. if(msg.success){
  11. $("#myModal").modal('toggle');
  12. loadSignIn();
  13. }
  14. });
  15. }
  16. });

jquery.validate ajax提交的更多相关文章

  1. 今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式

    今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...

  2. jquery实现ajax提交form表单的方法总结

    本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一:  function AddHandlingFeeToRefund( ...

  3. jQuery Validate Ajax 验证

    jQuery Validate Ajax 验证 <script type="text/javascript"> $(function() { $('#formCityL ...

  4. jquery实现ajax提交表单信息

    最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习jquery,基本上是现学现找,有点困难. 主要是扩展和拼接json转对象 很简单,附上代码: ; ...

  5. jquery validate ajax submit form

    when the jquery validation plugin is used for validating the form data, such as below: html code: &l ...

  6. jquery实现ajax提交表单

    一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...

  7. php使用jquery Form ajax 提交表单,并上传文件

    在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交.   一.jquery.form.js下载地址 ...

  8. jquery.validate ajax方式验证

    在做网站的时候有一块需要用到jquery.validate插件 ajax方式的方式来验证原始密码是否正确,研究了研究加上博客园朋友的帮助,终于实现了.贴出代码 <script type=&quo ...

  9. jquery validate submitHandler 提交导致死循环

    dom对像的提交form.submit();和jquery对像的提交$('').submit();功能上是没有什么区别的.但是如果用了jquery validate插件,提交时这二个就区别大了.$(' ...

随机推荐

  1. golang笔记——IDE

    可选方案有 Lite IDE\GoSublime\Visual Studio Code\Goclipse\Vim 1.Lite IDE 这是国人开发的开源且跨平台的 golang 专属IDE,也算是目 ...

  2. 大熊君大话NodeJS之------Http模块

    一,开篇分析 首先“Http”这个概念大家应该比较熟悉了,它不是基于特定语言的,是一个通用的应用层协议,不同语言有不同的实现细节,但是万变不离其宗,思想是相同的, NodeJS作为一个宿主运行环境,以 ...

  3. WCF 已知类型和泛型解析程序 KnownType

    数据协定继承 已知类型和泛型解析程序 Juval Lowy 下载代码示例 自首次发布以来,Windows Communication Foundation (WCF) 开发人员便必须处理数据协定继承方 ...

  4. 【AngularJS】—— 11 指令的交互

    前面基本了解了指令的相关内容: 1 如何自定义指令 2 指令的复用 本篇看一下指令之间如何交互.学习内容来自<慕课网 指令3> 背景介绍 这例子是视频中的例子,有一个动感超人,有三种能力, ...

  5. mac jdk环境变量

    /System/Library/Java/JavaVirtualMachines/1.6.0.jdk /Library/Java/JavaVirtualMachines/jdk1.7.0_71.jdk ...

  6. Codeforces Round #270 1001

    Codeforces Round #270 1001 A. Design Tutorial: Learn from Math time limit per test 1 second memory l ...

  7. 【C语言入门教程】2.7 表达式

    表达式由运算符.常量及变量构成,C语言的表达式基本遵循一般代数规则.有几种运算法则是 C 语言表达式特有的. 2.7.1 表达式中的类型转换 同一表达式中的不同类型常量及变量在运算时需要变量为同一数据 ...

  8. HDU 1086You can Solve a Geometry Problem too(判断两条选段是否有交点)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1086 判断两条线段是否有交点,我用的是跨立实验法: 两条线段分别是A1到B1,A2到B2,很显然,如果 ...

  9. HDU 4923 Room and Moor

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4923 解题报告:给出一个长度为n的只包含0和1的序列,是否存在一个序列Bi满足一下条件: 1.     ...

  10. c++ 字符串流 sstream(常用于格式转换) 【转载】

    使用stringstream对象简化类型转换C++标准库中的<sstream>提供了比ANSI C的<stdio.h>更高级的一些功能,即单纯性.类型安全和可扩展性.在本文中, ...