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 相关文章推荐
Javascript 实用小技巧
Apr 07 Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
深入理解Promise.all
Aug 08 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 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
浅析PHP水印技术
2007/02/14 PHP
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php+javascript的日历控件
2009/11/19 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
js实现简单分页导航栏效果
2019/06/28 Javascript
Python中字符串的常见操作技巧总结
2016/07/28 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
银行实习自我鉴定
2013/10/12 职场文书
生物制药毕业生自荐信
2013/10/16 职场文书
一年级评语大全
2014/04/23 职场文书
垃圾桶标语
2014/06/24 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
酒店温馨提示语
2015/07/14 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python