Форма имени пользователя: Сравнение входных данных в массиве

Question

У меня есть форма HTML (регистрация) и код Javascript.В этом у меня есть форма, в которой пользователь должен ввести свое имя пользователя.Если введенное имя пользователя новое и не совпадает ни с одним из существующих имен пользователей.Появится предупреждение «Имя пользователя уже зарегистрировано», и входные данные будут сохранены в массиве.В другом случае имя пользователя уже существует, появится окно предупреждения «Имя пользователя уже существует», а входные данные не будут сохранены в массиве.

Вот мой HTML-код

<div id="format">
        <form id="myForm" onsubmit="myFormData(event);">
            <b>User Name:</b></br>
            <input type="text" name="uName" id="uName"  required="required" onsubmit="userName(event)" ></input></br>
<button type="submit" name="submit" id="submit" value="Submit" onsubmit="myFormData(event)"> Submit </button>
        </form>

        <div id="sample"></div>
</div>

Вот код JavaScript.

"use strict";
var data = [];

function myFormData(event){
    //  handle form submit event to add an event
    event.preventDefault();
    // cut down form:
    var uName = document.getElementById("uName").value;
var userObject = {
        uName: uName,
 };
    addData( userObject);
    console.log(data);

}

function addData(userObject) {
        data.push(userObject);
        redrawList();
}

function removeData(event) {
        var index = this.getAttribute("data-index");
        data.splice( index,1);
        redrawList();
        console.log(data);
}

function redrawList() {
        var container = document.getElementById( "sample" );
        container.innerHTML = ""; // reset list displayed on page

        for (var index=0 ; index <data.length ; index++){
            var theDiv = document.createElement( "div" );
            var divHTML = "";
            var button = document.createElement( "button");
            var userObject = data[index];
            button.setAttribute("id", "remove");

            for( var item in userObject) {
                if( !userObject.hasOwnProperty( item)) {
                    continue; // ignore inherited properties


                }
                divHTML +=  item + ":" + userObject[item] + "</br>" ;
            }
            theDiv.innerHTML = divHTML;
            theDiv.style = "background-color:pink; border-style:solid; margin:1%;";
            button.type="button";
            button.setAttribute("data-index", index);
            button.innerHTML = "X";
            button.onclick=removeData;   
            theDiv.appendChild (button);
            container.appendChild( theDiv );

        }
}


function userName(event){
    if (data["uName"] !== data["uName"]){
        alert("Welcome New User!");
    }
    else {
        alert("Entered Username is already existing");
        return false;
    }

    redrawList();
}

Авторы некоторых программистов, которые мне помогают.

Answer 1

проверить наличие имени пользователя перед его добавлением.

function myFormData(event) {
  //  handle form submit event to add an event
  event.preventDefault();
  // cut down form:
  var uName = document.getElementById("uName").value;
  var userObject = {
    uName: uName,
  };

  //check username already exists
  for(var i=0; i < data.length; i++)
    if(data[i].uName.toUpperCase().trim() == uName.toUpperCase().trim()){
    alert("Username: "+ uName +" is already existing");
    return;//EXIT
    }

  addData(userObject);
  console.log(data);
  alert( "Username Is Now Registered" );
}