含字段验证的AJAX注册表单密码校验规则不生效求解决方案

• 变量误用：声明password、repass变量时已经通过.val()方法获取到了输入框的字符串值，不是jQuery DOM对象，后续调用password.val()属于非法操作，返回undefined直接导致判断条件不成立。
• 长度校验逻辑错误：判断密码长度需要读取字符串的.length属性，直接将密码值和数字6对比不符合需求，只会在密码是大于等于6的纯数字时才会通过，完全不符合长度校验的预期。
• 缺少空白内容过滤：如果用户输入全空格的内容，当前的非空判断会将其识别为有效内容，不符合业务逻辑。

第一步：修改校验判断条件 #

将原判断条件替换为以下代码即可修复校验失效问题：

if(fname.trim() && lname.trim() && email.trim() && password.trim() && repass.trim() && password.length >= 6 && password === repass) {

说明：

• 新增.trim()方法过滤首尾空白字符，避免全空格输入被判定为有效内容，不需要该规则可自行删除
• 用.length属性读取密码长度做校验，符合长度≥6位的需求
• 用严格相等符===判断两次密码是否一致，避免隐式类型转换带来的异常问题

第二步：补充错误提示逻辑（符合需求中展示错误提示的要求） #

可以在判断条件不通过时增加对应提示，优化用户体验，示例如下：

// 先执行前端字段校验
if(!fname.trim() || !lname.trim() || !email.trim() || !password.trim() || !repass.trim()){
    alert("所有字段不能为空");
}else if(password.length < 6){
    alert("密码长度不能少于6位");
}else if(password !== repass){
    alert("两次输入的密码不一致");
}else{
    // 校验通过，执行AJAX请求调用后端接口
    jQuery.ajax({
        // 原有AJAX逻辑保持不变即可
        url: "connection.php",
        data: {
            fname:fname,
            lname:lname,
            email:email,
            password:password,
            repass:repass
        },
        type: "POST",
        success:function(data){
            $("#emailExists").show();
            $("#email").css("border","2px solid green");
            $("#no").css("visibility","hidden");
            $("#yes").css("visibility","visible");
            if(data){
                $("#email").css("border", "2px solid red");
                $("#no").css("visibility","visible");
                $("#yes").css("visibility","hidden");
            }else{
                $("#email").css("border", "2px solid green");
                $("#no").css("visibility","hidden");
                $("#yes").css("visibility","visible");
                window.location.href = 'home.php';
            }
            $("#emailExists").html(data);
        },
        error:function (){
        }
    });
}

补充安全提示 #

前端校验仅用于提升用户体验，后端connection.php接口必须再做一遍相同的校验规则（非空、密码长度、两次密码一致、邮箱唯一性校验），避免用户绕过前端直接发送请求导致非法数据入库。

内容的提问来源于stack exchange，提问作者user17086589