67,513
社区成员
发帖
与我相关
我的任务
分享问下前端form表单验证怎么做
不好意思新手
1、就是点击提交 比如没有选择文件 就前端提示请选择excel文件，不晓得前端怎么验证 ，现在点一下直接跳出来"success":false,"msg":"请选择excel文件"}
2、后端验证有好几个 这么多一起是怎么写前端验证的
java 和html代码附上
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="repairs.name" 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="am-btn am-btn-primary tpl-btn-bg-color-success " >取消</a>
<input class="am-btn am-btn-primary tpl-btn-bg-color-success " id="addList" value="提交" type="submit"
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
...全文
请发表友善的回复…
发表回复
执笔记忆的空白 2017-05-24
- 打赏
- 举报
ajax去处理啊 ，获取到你后台返回的数据了{"success":false,"msg":"请选择excel文件"}
只需要展示 msg的信息就好了
一个治疗术 2017-05-24
- 打赏
- 举报
提示，格式验证，必输验证 都在后台，真的有耐心，这些都可以在前端用JS验证的。而且方法网上很多，就不一一赘述了
梦兰伯特 2017-05-24
- 打赏
- 举报
大神再问下
map.put("msg", "第"+(i+2)+"行，第"+(j+1)+"列不能为空！");
map.put("msg", "第"+(i+2)+"行，第"+(j+1)+"列的\"联系电话传感器Id\"必须为数字");
map.put("msg", "导入成功，共导入"+s+"行数据，丢失"+l+"行数据");
这些是怎么做呢
wf-love-yx 2017-05-24
- 打赏
- 举报
表单校验分为前端校验和后端校验，一般是两者都要有，先是前端校验，再是后端校验，
前端校验是为了确保数据合理并且减少服务器压力，后端校验确保数据的合理性合法性
为了达到你要的效果，在你前端的校验中，可以去掉提交按钮的type="submit"属性，改为用js提交，在js里添加校验
$("#addList").click(function(){
var excel = $(‘input[name="excel"]’).val();
if(!excel || excel==''){
alert("请选择excel文件");
return false;
}else{
$("form").submit();
}
});
后端校验话值需要把错误信息弹出到前端页面即可。
zy_arhahaha 2017-05-24
- 打赏
- 举报
有一个onsubmit事件，在提交表单之前调用，你监听一下这个事件，就可以在里面写验证了
