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 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jquery实现图片放大镜效果
Dec 23 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 设计模式之 工厂模式
2008/12/19 PHP
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
基于vue实现分页效果
2017/11/06 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
Python脚本获取操作系统版本信息
2016/12/17 Python
python中模块的__all__属性详解
2017/10/26 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
难忘的一课教学反思
2014/04/30 职场文书
营销经理工作检讨书
2014/11/03 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android