不提交表单如何校验register.php首个组件内容以阻止跳转至第二组件？

原有代码错误点 #

• 函数已经接收了传入的form表单对象，但代码中错误使用this取值，此处this并不指向当前表单，导致无法正确获取输入值
• 非空校验逻辑错误：使用&&逻辑与运算符，只有所有输入框全为空才会触发后续判断，实际应该用||逻辑或，只要任意一个输入框为空就提示补全
• 密码长度判断错误：直接对比password.value > 8是判断字符串内容的大小，正确写法应该取输入内容的长度属性.length
• 拼写错误：代码中将password_conf误写为pasword_conf，和表单的name属性不匹配，无法取到确认密码的值
• 逻辑层级错误：非空判断的分支写反了，原有代码是所有输入都为空才进入密码校验，刚好和需求相反

修正后的代码 #

JS校验代码 #

function checkform(form){
    // 先判断是否有未填项
    if(form.name.value == '' || form.email.value == '' || form.phone.value == '' || form.password.value == '' || form.password_conf.value == ''){
        alert("Por favor, complete todos los espacios");
        return false;
    }
    // 再判断两次密码是否一致
    if (form.password.value != form.password_conf.value){
        alert("Las contraseñas deben ser iguales");
        return false;
    }
    // 再判断密码长度是否符合要求
    if (form.password.value.length < 8){
        alert("La contraseña debe ser mayor a 8");
        return false;
    }
    // 所有校验通过，切换组件
    $("div.component1").hide();
    $("div.component2").show();
}

补充说明 #

你不需要使用AJAX就能实现需求，当前校验都是前端本地规则校验，不需要和服务端交互。你的跳转按钮type已经设置为button，点击不会默认触发表单提交，只有第三个组件的提交按钮设置为submit才会最终提交表单，完全符合你的要求。
如果后续需要增加服务端校验（比如判断邮箱是否已被注册），使用AJAX校验完成后只要不手动调用表单的submit()方法，也不会自动提交表单。

内容的提问来源于stack exchange，提问作者Sofía González