jquery.validate ajax提交
2016-04-08 16:58
543 查看
页面引入jquery.validate.min.js
要验证的form,必须是form表单,提交不提交的无所谓
js中如下:
发送的ajax请求如下:
<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全屏背景图片导航
- 用CSS和jQuery制作简单的下拉框
- Jquery 行选中背景色
- jquery ui 的弹出窗体 dialog 高度会产生变化
- 如何不刷新页面而刷新页面中某个文件
- 培训第四节课笔记(DOM,JQUERY)
- jQuery 1.x and 2.x , which is better?
- 微信公众账号开发利器 - jQuery WeUI V0.6.0 发布
- jQuery动态五星评分
- jqueryAPI删除造成的问题
- jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
- 1-jQuery - AJAX load() 方法【基础篇】
- jquery中的$(this)和this
- 献给和我合作的过得前端童靴们:jquery源码分析--核心函数(动态创建document元素)
- 常见jquery函数集合总结
- 原生js和jquery实现图片轮播特效
- Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
- JQuery实现广告效果(滚动切换)
- JQuery Ajax Options
- jquery validate和jquery form 插件组合实现验证表单后AJAX提交