视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
js表单序列化判断空值的实例
2020-11-27 22:29:05 责编:小采
文档


学习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;
 }
 }
});

下载本文
显示全文
专题