页面引入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. ThinkPHP整合支付宝担保交易

    ThinkPHP整合支付宝担保交易本代码参考大神 http://www.thinkphp.cn/code/240.html 的思路 1.登陆支付宝后台,下载担保交易的集成包. 2.下载完成后的文件说明 ...

  2. Materialize一款不错的框架(装逼必备,想想一帮渣渣们还在说bootstrap的时候,你用materialize,高端洋气,别人仰望着,同事们鄙视的看着你还能不能愉快的玩耍的时候,那种孤高的感觉!-_-//意淫结束)

    这个materialize感觉比bootstrap好一点 当然啦中文文档还木有!所以想搞个materialize中文网的可以抢先咯! materialize是谷歌设计制作的一款框架. HOHO,出去别 ...

  3. 同一个解决方案"引用"其他的项目出现感叹号...

    项目A是自己新建的... 但是项目B是"添加"→"现有项目"添加的... 所以项目B引用项目A的时候,引用的项目A显示感叹号... 项目A右击"属性& ...

  4. SQL如何将A,B,C替换为'A','B','C'

    因为涉及到逗号,和单引号' 本来想一次转换成功, 但是最后貌似没有好的办法, 只有分两次完成了 select REPLACE(REPLACE('A,B,C',',','>,>'),'> ...

  5. PHP的$_SERVER['PHP_SELF']造成的XSS漏洞攻击及其解决方案

    $_SERVER['PHP_SELF']简介 $_SERVER['PHP_SELF'] 表示当前 PHP文件相对于网站根目录的位置地址,与 document root 相关. 假设我们有如下网址,$_ ...

  6. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  7. lua练手基础

    lua的库文件地址: http://luaforge.net/projects/lua官网 http://lua.org --[[ print string. multiple line commen ...

  8. java之BASE64加解密

    1.简介 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,采用Base64编码具有不可读性,即所编码的数据不会被人用肉眼所直接看到. 注:位于jdk的java.util包中. 2. ...

  9. H5图像遮罩-遁地龙卷风

    (-1)写在前面 这个idea不是我的,向这位前辈致敬.我用的是chrome49.用到的图片资源在我的百度云盘里http://yun.baidu.com/share/link?shareid=1970 ...

  10. SpringBoot使用的心得记录

    security配置 import com.yineng.corpsysland.security.*; import com.yineng.corpsysland.web.filter.Author ...