JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)


Posted in jQuery onJune 09, 2017

 先上三张效果图:

JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理) 
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理) 
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)

这些功能在Java Web开发中可能是经常需要的,虽然很简单却使很实用的功能,这里记录下以免忘记。

1. 先说表单提交前验证:后台经常用到(这里是提交后统一验证,及时验证请参考我另一篇文章

http://blog.csdn.net/jianzhonghao/article/details/52503431)

1.1 通过submit 按钮提交后 会根据form的属性action=“路径”来跳转到相应的路径,这时,给form添加一个 onsubmit =”return check()” 属性, check()使我们要写的验证函数,如下图:

<form action="路径" onsubmit="return check()" method="POST">

1.2 check()函数如下(验证姓名是否填写 与 单选框性别是否选中) $(‘#notice') 的话,随便写个div加个id属性就好了

<script type="text/javascript"> 
 function check(){
  var name = $('#name').val().trim();
  var gender=$('input:radio[name="gender"]:checked').val();
  if(!name){
   $('#notice').text('客服名称不能为空!').show();
   return false;
  }else if(!gender){
   $('#notice').text('请选择客服性别!').show();
   return false;
  }
  else{
   return true;
  }
 }
</script>
<div id="notice" style="font-size: 30px;color:red;margin-top: 15px;" ></div>

1.3最后说一下删除时,确认是否删除的问题

<input type="image" src="删除图标的路径" title="删除" onclick="{if(confirm('确定删除吗?')){javascript:document:delfrom_${ServerInfo.id };return true;}return false;}">
分开写实际就是
if(confirm('确定删除吗?')){
 {javascript:document:delfrom_${ServerInfo.id };
 return true;
}
 return false;

以上所述是小编给大家介绍的JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
Jquery中attr与prop的区别详解
May 27 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 #jQuery
jQuery为某个div加入行样式
Jun 09 #jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 #jQuery
jQuery Validate表单验证插件实现代码
Jun 08 #jQuery
jquery Ajax实现Select动态添加数据
Jun 08 #jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 #jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 #jQuery
You might like
使PHP自定义函数返回多个值
2006/11/26 PHP
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
研究生自荐信
2013/10/09 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
预备党员公开承诺书
2014/05/28 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
孝女彩金观后感
2015/06/10 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python