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" );
}

用户名表单：比较数组中的输入数据

1 个答案: