我之前在前端一直写的都是不等于空字符串
if (username.val() === "")，然后执行逻辑，到后端二次校验的时候也是用 userName.equals("") 这个方法判断的,结果总是出现一些漏判的情况。后来我逐渐发现有一些变量空的时候是 null 和 "" 这两种不同的结果。
最后我观察得出，应该是与变量类型以及前端组件不同有关
空的时候为null的变量，一般都是包装类（Integer）和单选按钮、复选框传过来的变量，为“”空字符串的变量，一般都是String类型、input获取的值的变量
建议后端都用 Objects.equals(userName,"") 这个方法做比较，不要再用 == 以及
userName.equals("") 这个方法了
还有一点值得注意的就是，这个age变量后端显示为null，但是我前端判断age === null 却不相等，后面改成了 age.val() == "" 才相等，所以我觉得，从input里面读出来的空应该就是空字符串，传到后端不知道经过了什么就变成null了。
还有就是前端判断null时不能用===三等于，要写成 if (sex.val() == null) ，所以我认为以后还是都写成==比较好。
以下为代码;
前端
<form id="dialog-from-label" style="text-align: center">
<table>
<tr>
<td><label for="user-name-label">姓名：</label></td>
<td><input name="name" id="user-name-label" type="text" v-model="ruleForm.name"></td>
</tr>
<tr>
<td><label for="userName">账号：</label></td>
<td><input type="text" name="userName" id="userName" v-model="ruleForm.username"></td>
</tr>
<tr>
<td><label for="password-label">密码：</label></td>
<td><input type="password" name="password" id="password-label" v-model="ruleForm.password"></td>
</tr>
<tr>
<td><label for="phone-label">电话：</label></td>
<td><input type="text" name="phone" id="phone-label" v-model="ruleForm.phone"></td>
</tr>
<tr>
<td><label for="age">年龄：</label></td>
<td><input type="text" name="age" id="age" v-model="ruleForm.age"></td>
</tr>
<tr>
<td>请选择性别：</td>
<td><!--:checked="{'checked':ruleForm.sex==1}"-->
<input id="man" type="radio" name="sex" value="1"><label for="man">男</label>
<input id="female" type="radio" name="sex" value="2"><label for="female">女</label>
</td>
</tr>
<tr>
<td>请选择账号类型：</td>
<td>
<input type="radio" id="admin" name="type" value="0"><label for="admin">管理员</label>
<input type="radio" id="teacher" name="type" value="1"><label for="teacher">教师</label>
</td>
</tr>
<tr>
<td><input type="button" value="提交" id="button" onclick="s()"></td>
<td><span id="name-span" style="color: red;">{{msg}}</span></td>
</tr>
</table>
</form>
<script>
function s() {
let name = $('#user-name-label');
let username = $("#userName");
let password = $("#password-label");
let sex = $('input[name="sex"]:checked');
let age = $("#age");
let phone = $("#phone-label");
let type = $('input[name="type"]:checked');
let sp = $("#name-span");
console.log(sex.val());
console.log(type.val())
if (name.val() == "") {
sp.text("姓名不能为空");
return false;
} else if (username.val() == "") {
console.log(username.val());
sp.text("账号不能为空");
return false;
} else if (password.val() == "") {
console.log(password.val());
sp.text("密码不能为空");
return false;
} else if (phone.val() == "") {
console.log(phone.val());
sp.text("手机号不能为空");
return false;
} else if (age.val() == "") {
console.log(age.val());
sp.text("年龄不能为空");
return false;
}else if (sex.val() == null){
sp.text("性别不能为空");
console.log(1)
return false;
}else if (type.val() == null){
sp.text("账号类型不能为空");
console.log(2)
return false;
}
console.log(123)
$.ajax({
url: "/users",
type: "POST",
data: {
name: name.val(),
userName: username.val(),
password: password.val(),
sex: sex.val(),
age: age.val(),
phone: phone.val(),
type: type.val()
},
success(data) {
console.log(data);
sp.text(data.msg);
},
error(err) {
console.log(err);
alert("后端接口异常："+err);
}
})
}
</script>后端;
@PostMapping
public R<String> insertUser(User user) {
System.out.println("user = " + user);
String name = user.getName();
String userName = user.getUserName();
String password = user.getpassword();
String sex = user.getSex();
Integer age = user.getAge();
String phone = user.getPhone();
Integer type = user.getType();
/*非空校验*/
if (Objects.equals(name,"")) {
return R.err("姓名为空");
} else if (Objects.equals(userName,"")) {
return R.err("账号为空");
} else if (Objects.equals(password,"")) {
return R.err("密码为空");
} else if (Objects.equals(sex,null)) {
return R.err("性别为空");
} else if (Objects.equals(age,null)) {
return R.err("年龄为空");
} else if (Objects.equals(phone,"")) {
return R.err("电话为空");
} else if (Objects.equals(type,null)) {
return R.err("账号类型为空");
}
/*插入*/
int i = serviceImp.insertUser(user);
if (i == 1) {
return R.success("添加成功");
}
return R.err("账户名重复");
}最后声明一下，我是后端程序员，前端写的不好，没试过vue的双向绑定会不会出现null和空字符串的情况
