html

      <form id="loggin-form" onsubmit="return submitForm()">
        <p id="error" style="color:red"></p>
        <p>用户名: <input type="text" name="username" placeholder="请输入用户名" id="username"> </p>
        <p>密码: <input type="password" placeholder="请输入密码" id="password" name="password"></p>
        <p>重复密码: <input type="password" placeholder="请输入密码" id="re-password"></p>
        <p> <button type="submit">提交</button> <button type="reset">重置</button></p>
      </form>

js

function submitForm() {
  var 
    name_reg = /^[A-Za-z0-9]{3,10}$/,
    pwd_reg = /^[A-Za-z0-9]{6,10}$/,
    error = document.getElementById("error"),
    username = document.getElementById("username").value,
    pwd = document.getElementById("password").value,
    re_pwd = document.getElementById("re-password").value;
  if (!name_reg.test(username)) {
    error.innerText = "用户名为3~10的字符或者数字";
    return false;
  }
  if (!pwd_reg.test(pwd)) {
    error.innerText = "密码为6~10位的字符或者数字";
    return false;
  }
  if (pwd != re_pwd) {
    error.innerText = "两次输入的密码不一致"
    return false;
  }
  alert("提交成功");
  return true;
}