我之前在前端一直写的都是不等于空字符串
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和空字符串的情况
原文地址:https://www.jb51.cc/wenti/3281957.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。