Javascript 和 html 连接

Question

为什么输入矩形的边缘不是绿色或红色？问题可能出在 JS 文件中。我该如何解决？

这是html的一部分。

<form action="Registrazione" method="post" name="registrazione" id="form">
<div class="signlog">
<h1>Registrazione</h1>
<p>Compila il form per creare un account.</p>   
<label for="username"><b>Username</b></label>
<input type="text" name="username" onchange="controlloUsername()" id="uno"></form>

这是JS的部分。

function controlloUsername()
{
var lettere=/^[a-z0-9A-Z]+$/;
var username=document.forms["registrazione"].elements["username"].value;
if(username.length<5 || username.length>10 || !username.match(lettere))
{
    document.registrazione.username.style.borderColor="red";
    return false;
}
else{
    document.registrazione.username.style.borderColor="green";
    return true;
}
}

function validazione()
{
      if(!controlloUsername())
{
    document.registrazione.username.focus();
    return false;
}  
}

function registrati()
{


$.post("registrazione",
{

         username : $("#uno").val(),

     },

Answer 1

您的JavaScript 和HTML 都不错，那是CSS 的任务。您只需将 input#uno 的 border-style 属性更改为 solid。

function controlloUsername() {
  var lettere=/^[a-z0-9A-Z]+$/;
  var username=document.forms["registrazione"].elements["username"].value;
  if(username.length<5 || username.length>10 || !username.match(lettere)) {
  
  document.registrazione.username.style.borderColor="red";
    return false;
  } else {
  
  document.registrazione.username.style.borderColor="green";
    return true;
  }
}

function validazione() {
  if(!controlloUsername()) {
  
  document.registrazione.username.focus();
    return false;
  }  
}

input#uno {
  border-style:solid;
}

<form action="Registrazione" method="post" name="registrazione" id="form">
<div class="signlog">
<h1>Registrazione</h1>
<p>Compila il form per creare un account.</p>   
<label for="username"><b>Username</b></label>
<input type="text" name="username" onchange="controlloUsername()" id="uno"></div></form>

希望我能进一步插入你。