梦兰伯特 2017-05-24 03:57 采纳率: 100%
浏览 1141
已采纳

问下前端form表单验证怎么做

_不好意思新手
1、就是点击提交 比如没有选择文件 就前端提示请选择excel文件,不晓得前端怎么验证 ,现在点一下直接跳出来"success":false,"msg":"请选择excel文件"}
2、后端验证有好几个 这么多一起是怎么写前端验证的
java 和html代码附上

 public Object importExcel(UploadFile files) {
        Map<String, Object> map=new LinkedHashMap<String, Object>();
        if (files==null||StrKit.isBlank(files.getFileName())) {
            map.put("success", false);
            map.put("msg", "请选择excel文件");
            return map;
        }
        else {
            String filename = PathKit.getWebRootPath() + "/upload/"
                    + files.getFileName();
            filename = filename.replaceAll("\\\\", "/");
            int cells = 0;
            int rows=0;
            int ColCount=5;//导入的字段数
            try {
                HSSFWorkbook wookbook =new HSSFWorkbook(new FileInputStream(filename));
                HSSFSheet sheet = wookbook.getSheetAt(0);
                rows = sheet.getPhysicalNumberOfRows();
                Object[][] paras = new Object[rows-1][ColCount];
                for (int i = 0; i < rows; i++) {
                    HSSFRow row = sheet.getRow(i);
                    cells = row.getPhysicalNumberOfCells();
                    if (row != null) {
                        if (i==0) {
                            if (cells!=ColCount) {
                                map.put("success", false);
                                map.put("msg", "数据有误,请查看注意事项!");
                                return map;
                            }
                        }
                        else {
                            for (int j = 0; j < cells; j++) {
                                HSSFCell cell = row.getCell(j);
                                if (cell != null) {
                                    switch (cell.getCellType()) {
                                    case HSSFCell.CELL_TYPE_FORMULA:
                                        break;
                                    case HSSFCell.CELL_TYPE_NUMERIC:
                 if (HSSFDateUtil.isCellDateFormatted(cell)) {// 处理日期格式
                                            SimpleDateFormat sdf = null;  
                 if (cell.getCellStyle().getDataFormat() == HSSFDataFormat  
                                                    .getBuiltinFormat("h:mm")) {  
                                                sdf = new SimpleDateFormat("HH:mm");  
                    } else {// 日期  
                              sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");  
                                            }  
                                            Date date = cell.getDateCellValue();  
                                            paras[i-1][j] = sdf.format(date);  
                       } else if (cell.getCellStyle().getDataFormat() == 58) {  
        // 处理自定义日期格式:m月d日(通过判断单元格的格式id解决,id的值是58)  
       SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");  
                                            double value = cell.getNumericCellValue();  
                                            Date date = org.apache.poi.ss.usermodel.DateUtil  
                                                    .getJavaDate(value);  
                                            paras[i-1][j] = sdf.format(date);  
                                        } else {  
                                            double value = cell.getNumericCellValue();  
                                            CellStyle style = cell.getCellStyle();  
                                            DecimalFormat format = new DecimalFormat();  
                                            String temp = style.getDataFormatString();  
                                            // 单元格设置成常规  
                                            if (temp.equals("General")) {  
                                                format.applyPattern("#");  
                                            }  
                                            paras[i-1][j] = format.format(value);  
                                        }  
                                        //    paras[i-1][j] = cell.getNumericCellValue();
                                        break;
                                    case HSSFCell.CELL_TYPE_STRING:
                                        paras[i-1][j] = cell.getStringCellValue();
                                        break;
                                    default:
                                        paras[i-1][j] = null;
                                        break;
                                    }
                                }
                            }
                        }
                    }
                }
                for (int i = 0; i < paras.length; i++) {
                    for (int j = 0; j < paras[i].length; j++) {
                        if (j==0||j==1||j==2||j==4||j==5) {//非空的列
                            if (paras[i][j]==null||validateIsBlank((String)paras[i][j])) {
                    map.put("success", false);
                    map.put("msg", "第"+(i+2)+"行,第"+(j+1)+"列不能为空!");
                                return map;
                            }
                            if(j==0){//检测联系电话
                                if (!validateSensorId((String) paras[i][j])) {
                                    map.put("success", false);
                                    map.put("msg", "第"+(i+2)+"行,第"+(j+1)+"列的\"联系电话传感器Id\"必须为数字");
                                    return map;
                                }
                            }
                        }
                    }
                }
                int[] ret=null;
    String sql="insert into `repairs`(name,address,tel,type,baddescribe)values(?,?,?,?,?)";
                try {
                    ret = Db.batch(sql, paras, 100);
                    int s = 0, l = 0;
                    for (int i = 0; i < ret.length; i++)
                        if (ret[i] == 1)
                            s++;
                        else
                            l++;
                    map.put("success", true);
                    map.put("msg", "导入成功,共导入"+s+"行数据,丢失"+l+"行数据");
                    wookbook = null;
                } catch (Exception e) {
                    e.printStackTrace();
                    map.put("success", false);
                    map.put("msg", "系统异常,稍后再试");
                }
            } catch (IOException e) {
                e.printStackTrace();
                map.put("success", false);
                map.put("msg", "系统异常,稍后再试");
            }
            ExcelImportUtil.deleteFile(new File(filename));//录入完将上传的文件删除
            return map;
        }
    }
前端  
        <form action="/repairs/importExcel" id="addListForm" class="am-form tpl-form-line-form"  enctype="multipart/form-data"  method="post" onsubmit="return checkIP();">
          <div class="am-form-group">                           
         <label for="user-name" class="am-u-sm-3 am-form-label">上传文件(.xls格式)</label>
           <div class="am-u-sm-9">
          <input type="file" name="excel" id="excel"  class="tpl-form-input" >
           </div>
           </div>                                                                                       
                            <div class="am-form-group">
                            <div class="am-u-sm-9 am-u-sm-push-3">
                            <a href="/repairs" class="" >取消</a>
                            <input  class=" " id="addList" value="提交" type="submit">
                                </div>          
                            </div>
                        </form>

_

  • 写回答

2条回答

  • Go 旅城通票 2017-05-24 04:44
    关注
     <form action="/repairs/importExcel" id="addListForm" class="am-form tpl-form-line-form" enctype="multipart/form-data" method="post" onsubmit="return checkIP();">
        <div class="am-form-group">
            <label for="user-name" class="am-u-sm-3 am-form-label">上传文件(.xls格式)</label>
            <div class="am-u-sm-9">
                <input type="file" name="excel" id="excel" class="tpl-form-input">
            </div>
        </div>
        <div class="am-form-group">
            <div class="am-u-sm-9 am-u-sm-push-3">
                <a href="/repairs" class="">取消</a>
                <input class=" " id="addList" value="提交" type="submit">
            </div>
        </div>
    </form>
    <script>
        function checkIP() {
            var f = document.getElementById('addListForm');
            if (f.excel.value == '') { alert('请选择Excel文件!'); f.excel.focus(); return false }
            else if (!/\.xlsx?$/i.test(f.excel.value)) { alert('请选择xls,xlsx后缀文件!'); f.excel.focus(); return false }
            //你这函数的其他代码
        }
    </script>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?
  • ¥15 错误 LNK2001 无法解析的外部符号
  • ¥50 安装pyaudiokits失败
  • ¥15 计组这些题应该咋做呀
  • ¥60 更换迈创SOL6M4AE卡的时候,驱动要重新装才能使用,怎么解决?
  • ¥15 让node服务器有自动加载文件的功能
  • ¥15 jmeter脚本回放有的是对的有的是错的