JS阻止form表单提交失败

问题简介

<form th:action="@{/user.do}" method="post" onsubmit="return preSubmit();">

function preSubmit(){
    //1 获取用户名输入框里的内容
    var usernameText = $("username").value;
    ...
}

js中没有引入jQuery但是使用了jQuery语法,导致没有获取到DOM对象,获取 value时其实是对null进行操作,会导致js报错。

而若js执行过程中有错误，则form表单会照常提交，会导致js截取表单提交失败

解决办法

1. 引入jQuery
2. 将js改为原生语法

function $(id){
    return document.getElementById(id);
}
function preSubmit(){
    //1 获取用户名输入框里的内容
    var usernameText = $("username").value;
    ...
}