1

几个小时以来，我一直在尝试解决这个问题，但我没有成功。我是编程初学者，如果我犯了一个愚蠢的错误，请原谅我。非常感谢。

当全局声明用户名和密码时，以下代码不起作用。

const form = document.querySelector ('.form');
const feedback = document.querySelector ('.feedback');
const patternPassword = /^[a-zA-Z0-9]{6,}$/;
const patternUsername = /^[a-zA-Z]{5,15}$/;

const username = form.username.value;
const password = form.pass.value;

form.addEventListener ('submit', (e) =>{
    
    e.preventDefault();
    if (patternUsername.test (username) && (patternPassword.test (password)))  {
        feedback.textContent = 'Congrats! You Have signed up.';
    } else {
        feedback.textContent = 'Wrong details.';
    }   
});

但是当我在本地声明用户名和密码时，如下所示。他们确实工作。但我需要在全球范围内声明它们，因为我需要在其他地方使用它们。

const form = document.querySelector ('.form');
const feedback = document.querySelector ('.feedback');
const patternPassword = /^[a-zA-Z0-9]{6,}$/;
const patternUsername = /^[a-zA-Z]{5,15}$/;

form.addEventListener ('submit', (e) =>{
    const username = form.username.value;
    const password = form.pass.value;
    e.preventDefault();
    if (patternUsername.test (username) && (patternPassword.test (password)))  {
        feedback.textContent = 'Congrats! You Have signed up.';
    } else {
        feedback.textContent = 'Wrong details.';
    }
});

另外，如果我不使用变量，而只是在正则表达式测试方法中引用像“form.username.input”这样的输入，它也可以这样工作。

const form = document.querySelector ('.form');
const feedback = document.querySelector ('.feedback');
const patternPassword = /^[a-zA-Z0-9]{6,}$/;
const patternUsername = /^[a-zA-Z]{5,15}$/;

form.addEventListener ('submit', (e) =>{
 
    e.preventDefault();
    if (patternUsername.test (form.username.value) && (patternPassword.test (form.pass.value)))  {
        feedback.textContent = 'Congrats! You Have signed up.';
    } else {
        feedback.textContent = 'Wrong details.';
    }
});

任何帮助将不胜感激，因为这个问题让我发疯。

4

1 回答 1

0

所以，我想将此问题标记为已解决，我在某处阅读以自己发布答案并将其标记为已解决。

以下是@teemu 提到的问题的解决方案。

页面加载时读取全局变量的值，此时输入为空。这就是为什么您需要读取事件侦听器中的值的原因。您可以声明一个读取值的函数，然后在需要密码和用户名时调用该函数。

编辑：RIP，它说您将能够在 2 天内接受答案。

于 2020-01-10T14:07:35.117 回答