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.Pin垂直滚动时固定导航
May 24 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery实现视频展示效果
May 30 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
基于jQuery拖拽事件的封装
Nov 29 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页面静态化
2018/02/05 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
关于Python数据结构中字典的心得
2017/12/04 Python
详解python多线程之间的同步(一)
2019/04/03 Python
如何通过Python实现标签云算法
2019/07/02 Python
python如何统计代码运行的时长
2019/07/24 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
python安装sklearn模块的方法详解
2020/11/28 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
机修工岗位职责
2013/11/24 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript