Javascript 验证正则表达式在Javscript中不使用全局变量而是使用局部变量的测试方法

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

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

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.';
    }
});

此外，如果我不使用变量，而只是在regex测试方法中引用“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.';
    }
});

---

任何帮助都将不胜感激，因为这个问题让我抓狂。

所以，我想把这个问题标记为已解决，然后我在某个地方读了一篇文章，自己发布一个答案，并将其标记为已解决

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

---

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

---

编辑：RIP，上面说你可以在2天内接受答案。

所以，我想把这个问题标记为已解决，然后我在某个地方阅读，自己发布一个答案，并将其标记为已解决

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

---

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

---

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

页面加载时读取全局变量的值，此时输入为空。这就是为什么需要读取事件侦听器中的值。您可以声明一个读取值的函数，然后在需要密码和用户名时调用该函数。@teemu非常感谢您的时间和回复。我不明白你的答案。我已经知道全局变量应该在任何地方都有效，但为什么在我的情况下它不起作用呢？另外，如果我不使用变量，只引用regex测试方法中的输入，如'form.username.input'，它也会这样工作。当页面加载

form.username.value

时，它是一个空字符串，因此

username

在事件侦听器中使用时保持为空。但是，如果您在提交时获取

form.username.value

，则会获取文本框的最新值。

form.username.value

返回一个值，而不是引用，并且您正在从空输入元素读取该值。只要变量的值被显式更改，该值就会保留在变量中。非常感谢各位。我现在明白了。祝您今天过得愉快。另外，我是这个网站的新手，所以我不知道如何标记这个问题已解决。全局变量的值在页面加载时读取，此时输入为空。这就是为什么需要读取事件侦听器中的值。您可以声明一个读取值的函数，然后在需要密码和用户名时调用该函数。@teemu非常感谢您的时间和回复。我不明白你的答案。我已经知道全局变量应该在任何地方都有效，但为什么在我的情况下它不起作用呢？另外，如果我不使用变量，只引用regex测试方法中的输入，如'form.username.input'，它也会这样工作。当页面加载

form.username.value

时，它是一个空字符串，因此

username

在事件侦听器中使用时保持为空。但是，如果您在提交时获取

form.username.value

，则会获取文本框的最新值。

form.username.value

返回一个值，而不是引用，并且您正在从空输入元素读取该值。只要变量的值被显式更改，该值就会保留在变量中。非常感谢各位。我现在明白了。祝您今天过得愉快。另外，我是这个网站的新手，所以我不知道如何标记这个问题已解决。