在前端表单开发中，我们经常会遇到需要组合多个校验规则的情况，比如要求用户必须同时填写手机号和验证码才能提交表单，或者满足邮箱、手机号任意一个即可登录。这类复杂校验逻辑不需要写大量嵌套的if语句，合理使用逻辑运算符就能让代码更简洁易维护。
常见的逻辑运算符介绍
JavaScript中常用的逻辑运算符有三种，分别是：
- 逻辑与（&&）：当左右两个条件都为true时，整体结果才为true，只要有一个为false，结果就是false。常用于表示多个条件必须同时满足的场景。
- 逻辑或（||）：当左右两个条件只要有一个为true时，整体结果就为true，只有两个都为false时结果才是false。常用于表示多个条件满足任意一个即可的场景。
- 逻辑非（!）：对当前条件的布尔值取反，true变为false，false变为true。常用于表示条件不满足的场景。
手机号且验证码必填的校验实现
我们先实现最基础的手机号正则校验和验证码非空校验，再用逻辑与运算符组合两个规则，实现两者必须同时填写的校验逻辑。
基础校验函数
首先编写手机号校验函数和验证码非空校验函数：
// 手机号正则校验，匹配11位国内手机号
function checkPhone(phone) {
const phoneReg = /^1[3-9]d{9}$/;
return phoneReg.test(phone);
}
// 验证码非空校验，同时校验长度是否为6位
function checkCode(code) {
return code && code.length === 6;
}
组合校验逻辑
使用逻辑与运算符组合两个校验函数，实现手机号和验证码必须同时符合要求才通过校验：
function validateForm(phone, code) {
// 逻辑与运算符组合两个校验条件，必须同时满足
const isPhoneValid = checkPhone(phone);
const isCodeValid = checkCode(code);
const isFormValid = isPhoneValid && isCodeValid;
if (isFormValid) {
console.log('表单校验通过，可以提交');
return true;
} else {
// 分别提示不满足的条件
if (!isPhoneValid) {
console.log('请输入正确的11位手机号');
}
if (!isCodeValid) {
console.log('请输入6位验证码');
}
return false;
}
}
// 测试示例
validateForm('13800138000', '123456'); // 校验通过
validateForm('123456', '123'); // 提示手机号错误和验证码错误
更复杂的校验场景扩展
除了两者必填的场景，我们还可以用逻辑运算符组合更多规则，比如登录时邮箱或者手机号满足一个即可，同时密码必须填写：
function checkEmail(email) {
const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;
return emailReg.test(email);
}
function validateLoginForm(account, password) {
// 账号可以是邮箱或者手机号，密码必须填写
const isAccountValid = checkEmail(account) || checkPhone(account);
const isPasswordValid = password && password.length >= 6;
// 组合两个条件：账号有效 且 密码有效
const isValid = isAccountValid && isPasswordValid;
if (isValid) {
console.log('登录信息校验通过');
return true;
} else {
if (!isAccountValid) {
console.log('请输入正确的邮箱或手机号');
}
if (!isPasswordValid) {
console.log('密码长度不能少于6位');
}
return false;
}
}
// 测试示例
validateLoginForm('test@ipipp.com', '123456'); // 邮箱+密码，通过
validateLoginForm('13800138000', '123456'); // 手机号+密码，通过
validateLoginForm('123', '123'); // 账号和密码都不符合，提示错误
注意事项
使用逻辑运算符做表单校验时，需要注意两个特性：
- 逻辑与（&&）具有短路特性，如果第一个条件为false，第二个条件不会执行。如果第二个条件有副作用（比如修改数据、发送请求），需要注意这个特性避免出现问题。
- 逻辑或（||）同样有短路特性，第一个条件为true时，第二个条件不会执行。
如果需要在校验时执行所有判断逻辑，不管前面的条件是否满足都要执行后面的校验，可以先执行所有校验函数拿到结果，再组合结果做判断，就像前面示例中的写法，这样能避免短路特性带来的问题。