邮箱注册弹窗表单JS验证name变量废弃问题排查求助

以下是代码里的几处核心问题及修复方法：

• 变量名冲突导致name变量异常
  name是浏览器window对象的内置全局属性，在全局作用域下声明const name会和内置属性冲突，就是你看到的变量废弃提示。直接重命名该变量即可：

// 原代码：const name = document.getElementById('name');
// 修改为
const userName = document.getElementById('name');

// 后续调用方法的地方同步替换变量名
checkRequired([userName, email, password, passwordConfirm]);
checkLength(userName,3,30);

• checkLength函数拼写错误导致长度校验失效
  你把字符串长度属性length错拼成了lenght，修改对应拼写即可：

function checkLength(input, min, max){
    // 把两处lenght都改成length
    if(input.value.length < min){
        showError(input, `${getFieldName(input)} 至少需要${min}个字符`);
    } else if (input.value.length > max) {
        showError(input, `${getFieldName(input)} 不能超过${max}个字符`);
    } else{
        showValid(input);
    }
}

• HTML结构属性错误
  确认密码输入框的name属性和密码输入框重复，会导致提示信息异常、后续提交数据错误，修改对应属性即可：

<!-- 原代码：<input type="password" class="modal-input" id="password-confirm" name="password" placeholder="Confirmá tu contraseña"> -->
<!-- 修改为 -->
<input type="password" class="modal-input" id="password-confirm" name="passwordConfirm" placeholder="Confirmá tu contraseña">

• 可优化项
  form标签的action属性中填写的javascript:Validate(id)是不存在的无效代码，你已经绑定了submit事件并阻止了默认提交行为，可以直接清空action属性避免不必要的报错。

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