页面引入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提交的更多相关文章

  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. django 文件上传

    模板文件: <form method='post' action='/script/upload/' enctype="multipart/form-data" accept ...

  2. HTTP状态301、404、200、304分别表示什么意思

    301 (永久移动)请求的网页已永久移动到新位置.服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置.您应使用此代码告诉 Googlebot 某个网页或网站已永久移动 ...

  3. seo是什么职业

    SEO(Search Engine Optimization)汉译为搜索引擎优化.seo从业者首要工作就是优化网站,使其符合搜索引擎的基本规律和满足用户的需求,进而获得大量的用户访问.SEO职业属于一 ...

  4. Linux中postfix邮件服务器的搭建

    postfix是Wietse Venema在IBM的GPL协议之下开发的MTA(邮件传输代理)软件.postfix是Wietse Venema想要为使用最广泛的sendmail提供替代品的一个尝试.在 ...

  5. assign与weak区别(面试)

    weak 比 assign 多了一个功能就是当属性所指向的对象消失的时候(也就是内存引用计数为0)会自动赋值为 nil ,这样再向 weak 修饰的属性发送消息就不会导致野指针操作crash. 可能不 ...

  6. 第31天 mvp

    interactor调用接口 Activity包含Presenter,这样界面上的操作就会通知到Presenter. Presenter调用view接口, Activity实现view接口,这样Pre ...

  7. xcode7 NSAppTransportSecurity

    在Info.plist中添加  NSAppTransportSecurity 类型  Dictionary Dictionary 下添加  NSAllowsArbitraryLoads 类型 Bool ...

  8. C\C++ 字符串的格式化与类型转化

    字符串格式化 1.sscanf int sscanf(const char *buffer,const char *format,[argument ]...) 取到指定字符为止的字符串.如在下例中, ...

  9. Entity Framework Code First数据库自动更新2

    以前做项目的时候,没有采用分类库的形式,所以迁移一致非常顺利,没有出现过任何状况. 这次做项目稍微有点大,必须要分类库才方便开发维护. 在解决方案中启用项目EntityFramework迁移时却发生了 ...

  10. BZOJ1455——罗马游戏

    1.题目大意:维护一个数据结构,可以实现合并操作,还能询问最小值 2.分析:这种问题当然是可并堆啦 随便写了一个左偏树QAQ #include <cstdio> #include < ...