js表单序列化判断空值的实例


Posted in Javascript onSeptember 22, 2017

学习javaweb的时候,做了将页面上的的表单信息添加到数据库中的练习。提交表单的时候,需要保证每个输入框、单选按钮、复选框等都不为空,刚开始的时候挨个获取控件的值进行判断是否为空,后来认识了表单序列化这么一个方法,就是了下用序列化来判断空值

//form表单页面

<form id="basicInfo" action="EmployeeServlet?flag=addEmployeeInfo" method="post">
  <div class="formbody">
    <div class="formtitle"><span>基本信息</span></div>
    <ul class="forminfo">
      <li>
        <label>员工账号</label>
        <input id="account" name="account" type="text" class="dfinput" readOnly="true" />
        <i>设置员工姓名和入职时间后,系统自动生成,无法更改</i>
      </li>
      <li>
        <label>员工姓名</label>
        <input name="name" type="text" class="dfinput" id="name" />
        <i>姓名不能为数字</i>
      </li>
      <li>
        <label>密码</label>
        <input name="password" type="password" class="dfinput" id="pwd" placeholder="空值或空白则默认密码为123456" />
        <i></i>
      </li>
      <li>
        <label>性别</label>
        <cite>
          <input name="gender" type="radio" value="男" checked="checked" />男    
          <input name="gender" type="radio" value="女" />女
        </cite>
      </li>
      <li>
        <label>生日</label>
        <input id="birth" name="birthday" type="text" class="dfinput" placeholder="格式:yyyy-mm-dd"/>
        <i id = "birthTip"></i>
      </li>
      <li>
        <label>手机号码</label>
        <input id="phone" name="telephone" type="text" class="dfinput" />
        <i id = "phoneTip"></i>
      </li>
      <li>
        <label>邮箱</label>
        <input id="email" name="email" type="text" class="dfinput" />
        <i id = "emailTip"></i>
      </li>
      <li>
        <label>地址</label>
        <input name="address" type="text" class="dfinput" />
        <i id = "addressTip"></i>
      </li>
      <li>
        <label>所属部门</label>
        <select id="dept" class="dfinput" name="dept">
          
        </select>
      </li>
      <li>
        <label>入职时间</label>
        <input id="entrytime" name="entrytime" type="text" class="dfinput" placeholder="格式:yyyy-mm-dd" />
        <i id = "timeTip"></i>
      </li>
      <li>
        <label>员工状态</label>
        <select id="empstate" class="dfinput" name="empstate">
        </select>
      </li>
      <li>
        <label>直属上级</label>
        <input id="superior" name="superior" type="text" class="dfinput" placeholder="直属上级员工id" />
        <i id = "superTip"></i>
      </li>
      <li>
        <label>职务</label>
        <select id="dutyid" class="dfinput" name="dutyid">
        </select>
      </li>
      <li>
        <label>角色权限</label>
        <select id="authority" class="dfinput" name="authority">
        </select>
      </li>
      <li>
        <label> </label>
        <input id="savebtn" type="submit" class="btn" value="确认保存"/>
      </li>
    </ul>
  </div>
</form>

在外链js文件中写了个提交时触发的事件

$('form').submit(function(){
//当密码为空的时候自动赋值
  var pwd = $('#pwd').val();
  if(pwd==null || pwd == ''){
    $('#pwd').val('123456');
  }
  var data = $('form').serialize();
//表单序列化后返回一个字符串 如:account=123&password=1234&sex=&dept=2
  var array = data.split('&');
//把字符串按&号分隔成数组 得到 {account=123,password=1234,sex=,dept=2} 字符串数组
  for(var i = 0;i < array.length; i++){
    var kwarr = array[i].split('=');
//循环将数组中的每个子元素字符串用=号分隔成数组 {account,123} {sex,} 然后判断索引为1的子元素是否存在或为‘' 从而达到了表单判空的目的
    if(kwarr[1]===null || kwarr[1] ===''){
      alert('除密码外不能存在空值');
      return false;
    }
  }
});

以上就是小编为大家带来的js表单序列化判断空值的实例的全部内容了,希望大家喜欢哦~

如果大家想了解更多游戏活动与游戏攻略,请持续关注本站,本站小编将在第一时间为大家带来最好看、最好玩、最新鲜的游戏资讯。更多精彩内容,尽在3water游戏频道!

Javascript 相关文章推荐
Jquery选择器 $实现原理
Dec 02 Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
Node.js Express安装与使用教程
May 11 Javascript
Vue使用v-viewer实现图片预览
Oct 21 Javascript
VUE中的无限循环代码解析
Sep 22 #Javascript
详解vue中引入stylus及报错解决方法
Sep 22 #Javascript
EL表达式截取字符串的函数说明
Sep 22 #Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 #Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 #Javascript
ES6中新增的Object.assign()方法详解
Sep 22 #Javascript
Vee-Validate的使用方法详解
Sep 22 #Javascript
You might like
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
javascript 实用的文字链提示框效果
2010/06/30 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
学生抄作业检讨书(2篇)
2014/10/17 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
开国大典观后感
2015/06/04 职场文书
大学生受助感言
2015/08/01 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python