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表单设置值的方法
Jun 30 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery实现全选按钮
Jan 01 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
PHP错误和异长常处理总结
2014/03/06 PHP
php实现httpclient类示例
2014/04/08 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
JSON 数据格式详解
2017/09/13 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
python单线程实现多个定时器示例
2014/03/30 Python
使用Python编写Linux系统守护进程实例
2015/02/03 Python
解析Python中的二进制位运算符
2015/05/13 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
python八大排序算法速度实例对比
2017/12/06 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
python实现月食效果实例代码
2019/06/18 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
python根据多个文件名批量查找文件
2019/08/13 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
python批量修改交换机密码的示例
2020/09/22 Python
三维科技面试题
2013/07/27 面试题
生产管理的三大手法
2013/11/11 职场文书
求职信需要的五点内容
2014/02/01 职场文书
大学班级文化建设方案
2014/05/06 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
2015年档案室工作总结
2015/05/23 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android