问下前端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个回答

 <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>

{"success":false,"msg":"请选择excel文件"}这个就是后端返回给你的错误信息,比如这个返回信息在前端叫data,你直接在前端写

alert(data.message);
if(!data.success){
    return false;
}

就可以了。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!