隐藏

EasyUI 表单验证注意事项

发布:2015/8/20 10:29:25作者:管理员 来源:本站 浏览次数:1334

easyui 文件上传,及结合springMVC 后台int参数的注意事项

1. 如果springMVC后台接收的参数为int则(如ID或序列等等参数),必须要有值,否则springMVC会报类转换失败的异常(避办法是前台隐藏传int参数的值或后台不要用int参数,可通过String转换为int),其原因是所有参数在request或respose都是字符串类型的,空字符串(NULL)转成int当然会报类型转换异常的!

2. 带有文件上传的表单不能通过简单的$('#addForm').form('clear');  和var r = $('#addForm').form('validate');的方法来清除和验证表单,否则easyui 会报TypeError: _3b4 is undefined 的异常(如果你不主动捕获是不会报的)


eg:

[javascript] view plaincopyprint?
  1. //新增  
  2. function addrow(){  
  3.     try {  
  4.             $('#addForm').form('clear');//参数中有默认值不能clear,springMVC int参数必须传入(springMVC 类型转换或报异常)  
  5.     } catch (e) {  
  6.         alert(e);  
  7.     }  
  8.     $('#geshouName').val('');  
  9.     $('#geshouId').val('0');  
  10.     showWin();  
  11. }  
  12.   
  13. function addOrUpdate(){  
  14.     alert(2);  
  15.     try {  
  16.         var r = $('#addForm').form('validate');  
  17.         alert(r);  
  18.         if(!r) {  
  19.             alert(false);  
  20.             return false;  
  21.         }  
  22.     } catch (e) {  
  23.         alert(e);  
  24.     }  
  25.       
  26.       
  27.     $('#addForm').form('submit', {   
  28.          url:'add.do',  
  29.          onSubmit: function(){     
  30.              alert('');  
  31.                 // do some check     
  32.                 // return false to prevent submit;     
  33.             },  
  34.         success: function(data){     
  35.             var data = eval('(' + data + ')');   
  36.             // change the JSON string to javascript object     
  37.             if (data && data.success == "true") {  
  38.                 $('#addWind').window('close');  
  39.                 $('#gridTable').datagrid('reload');    
  40.                 $.messager.alert('提示','添加成功','info');  
  41.             } else    
  42.                 $.messager.alert('错误提示','服务器繁忙,请稍候重试!','error');  
  43.         }     
  44.     });   

From HTML

  1. <form id="addForm" method="post" enctype="multipart/form-data" action="add.do" >  
  2.         <input type="hidden" id="geshouId" name="geShouId" value="0"/>  
  3.     <table align="center" style="margin: 10px;">  
  4.         <tr>  
  5.           <td>歌曲名字:</td>  
  6.           <td><input class="easyui-validatebox" data-options="required:true" type="text" name=mediaName id="geshouName"></input></td>  
  7.           <td rowspan="6">  
  8.             <img alt="" src="http://www.baidu.com/img/baidu_jgylogo3.gif">  
  9.           </td>  
  10.         </tr>  
  11.         <tr>  
  12.             <td>FTP文件名:</td>  
  13.             <td><input class="easyui-validatebox" data-options="required:true" type="text" ></input></td>  
  14.         </tr>  
  15.         <tr>  
  16.           <td>歌曲类型:</td>  
  17.             <td><select> </select></td>  
  18.         </tr>  
  19.         <tr>  
  20.             <td>歌手:</td>  
  21.             <td><input class="easyui-combobox" id="language"   
  22.             data-options="url:'http://localhost:8080/zhepg/manage/klok/geshou/listAll.do',valueField:'id',textField:'text'"></td>  
  23.         </tr>  
  24.         <tr>  
  25.             <td>合唱歌手名:</td>  
  26.             <td><input type="text" name="geShouName2" ></input></td>  
  27.         </tr>  
  28.         <tr >  
  29.             <td>歌曲封面:</td>  
  30.             <td><input type="file" class="easyui-validatebox" name="photoFile" ></input></td>  
  31.         </tr>  
  32.         <tr height="30" >  
  33.             <td colspan="2" align="center">  
  34.               <a href="javascript:void(0);" id="btn-back" onclick="$('#addWind').window('close');" class="easyui-linkbutton" iconCls="icon-back">返回</a>  
  35.               <a href="javascript:void(0);" id="btn-add" onclick="addOrUpdate();" class="easyui-linkbutton" iconCls="icon-save">保存</a>  
  36.             </td>  
  37.         </tr>  
  38.     </table>  
  39.     </form>  

这时不管你是初始化表单还是提交表单都会出现奇怪的现现象,debug下是看不到任何异常信息,如果你像我上面js里面去try 和catch异常会发现,原来已经报错了。具体为什么会导致这样,没有细查,我们要规避这一问题就是有文件的表表单如果需要验证就只能手工一个个去验证不 能直接

$('#addForm').form('clear');  和var r = $('#addForm').form('validate')