用户名形式：比较数组中的输入数据答案

【问题标题】：Username Form: Comparing the input data in an array用户名形式：比较数组中的输入数据
【发布时间】：2018-05-21 06:38:10
【问题描述】：

我有一个 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();
}

感谢一些帮助我的程序员。

【问题讨论】：

你的问题是什么？
@AndroidNoobie 我想检查输入的用户名是否已经存在。如果是新的，数据将存储在数组中并提醒（“您现在已注册”）。如果它已经存在，则不会在数组中恢复数据并提醒“用户名已存在”

标签： javascript arrays forms

【解决方案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" );
}

【讨论】：