用什么编程范式，是一个仁者见仁、智者见智的事情。

先写一个form表单，用来生成页面元素：

<form id="user-input">
  <div>
    <label for="username">Username</label>
    <input type="text" id="username" />
  </div>
  <div>
    <label for="password">Password</label>
    <input type="password" id="password" />
  </div>
  <button type="submit">Create User</button>
</form>

procedural

const form = document.getElementById("user-input");
const userNameInput = document.getElementById("username");
const passwordInput = document.getElementById("password");

function signupHandler(event) {
  event.preventDefault();
  const enteredUsername = userNameInput.value;
  const enteredPassword = passwordInput.value;
  if (enteredUsername.trim().length === 0) {
    alert("Invalid input - username must not be empty!");
    return;
  }
  if (enteredPassword.trim().length <= 5) {
    alert("Invalid input - password must be six characters or longer!");
    return;
  }
  const user = {
    username: enteredUsername,
    password: enteredPassword,
  };
  console.log(user);
  console.log(`Hi! I am ${user.username}`);
}

form.addEventListener("submit", signupHandler);

oop

class Validator {
  static REQUIRED = "REQUIRED";
  static MIN_LENGTH = "MIN_LENGTH";
  static validate(value, flag, validatorValue) {
    if (flag === this.REQUIRED) {
      return value.trim().length > 0;
    }
    if (flag === this.MIN_LENGTH) {
      return value.trim().length >= validatorValue;
    }
  }
}
class User {
  constructor(username, password) {
    this.username = username;
    this.password = password;
  }
  greet() {
    console.log(`Hi! I am ${this.username}`);
  }
}
class UserInputForm {
  constructor() {
    this.form = document.getElementById("user-input");
    this.userNameInput = document.getElementById("username");
    this.passwordInput = document.getElementById("password");
    this.form.addEventListener("submit", this.signupHandler.bind(this));
  }
  signupHandler(event) {
    event.preventDefault();
    const enteredUsername = this.userNameInput.value;
    const enteredPassword = this.passwordInput.value;
    if (
      !Validator.validate(enteredUsername, Validator.REQUIRED) ||
      !Validator.validate(enteredPassword, Validator.MIN_LENGTH, 5)
    ) {
      alert(
        "Invalid input - username must not be empty or password must be six characters"
      );
      return;
    }
    const user = new User(enteredUsername, enteredPassword);
    console.log(user);
    user.greet();
  }
}

new UserInputForm();

functional

const REQUIRED = 'required';
const MIN_LENGTH = 'min_length'
function validator(value, flag, validatorValue) {
  if (flag === REQUIRED) {
    return value.trim().length > 0;
  }
  if (flag === MIN_LENGTH) {
    return value.trim().length >= validatorValue;
  }
}

function createUser(username, password) {
  if (!validator(username, REQUIRED) || !validator(password, MIN_LENGTH, 5)) {
    throw new Error("Invalid input - username must not be empty or password must be six characters");
  }
  return {
    username,
    password
  }
}

function greet(username) {
  console.log(`Hi! I am ${username}`);
}

function getUserInput(inputElementId) {
  return document.getElementById(inputElementId).value;
}

function signupHandler(event) {
  event.preventDefault();
  const username = getUserInput('username');
  const password = getUserInput('password');
  try {
    const user = createUser(username, password);
    console.log(user);
    greet(user.username);
  } catch(err) {
    alert(err)
  }
}

function connectForm(formId, formSubmitHandler) {
  const form = document.getElementById(formId);
  form.addEventListener('submit', formSubmitHandler)
}
connectForm('user-input', signupHandler);