JS and jQuery registration information verification function implementation code

The effect of using JS and JQuery to implement the verification function of registration information is the same. This article shares with you the registration information verification function based on js+jquery through example code. The code is simple and easy to understand, very good, and has reference value. Friends who need it can refer to it. I hope it can help everyone.

HTML code

<legend> 请填写注册信息</legend>
  <form action="index.html" method="post">
    <table style="text-align: right;">
      <tr>
        <td>用户名：</td>
        <td><input type="text" name="userName" placeholder="由英文字母和数字组成的4-16位字符，以字母开头">
        </td>
      </tr>
      <tr>
        <td>昵称：</td>
        <td><input type="text" name="nickName" placeholder="由2-6个汉字组成">
        </td>
      </tr>
      <tr>
        <td>邮箱：</td>
        <td><input type="text" name="email" placeholder="邮箱账号@域名。如good@tom.com、whj@sina.com.cn">
        </td>
      </tr>
      <tr>
        <td>密码：</td>
        <td><input type="password" name="pwd" placeholder="由英文字母和数字组成的4-10位字符">
        </td>
      </tr>
      <tr>
        <td>确认密码：</td>
        <td><input type="password" name="pwd2" placeholder="确认密码">
        </td>
      </tr>
      <tr>
        <td>手机号码：</td>
        <td><input type="text" name="phone" placeholder="手机号由11位数字组成，且以13,15,18开头">
        </td>
      </tr>
      <tr>
        <td>出生日期：</td>
        <td><input type="text" name="date" placeholder="出生日期在1990-2009之间">
      </tr>
      <tr>
        <td colspan="2" align="left"><input type="button" name="submit" value="提交"></td>
      </tr>
    </table>
  </form>
</fieldset>

CSS style

 body {
      text-align: center;
      padding: 0;
      margin: 0;
    }
    fieldset {
      width: 800px;
    }
    table tr td ~ td {
      text-align: left;
      width: 600px;
    }

JS code

//验证用户名
function check_userName() {
  var userName = document.getElementById("name").value;
  var regName = /[a-zA-Z]\w{4,16}/
  if (userName == "" || userName.trim() == "") {
    document.getElementById("err_name").innerHTML = "请输入用户名";
    return false;
  } else if (!regName.test(userName)) {
    document.getElementById("err_name").innerHTML = "由英文字母和数字组成的4-16位字符，以字母开头";
    return false;
  } else {
    document.getElementById("err_name").innerHTML = "ok!!!";
    return true;
  }
}
//验证昵称
function check_nickName() {
  var nickName = document.getElementById("nick").value;
  var regName = /[\u4e00-\u9fa5]{2,6}/
  if (nickName == "" || nickName.trim() == "") {
    document.getElementById("err_nick").innerHTML = "请输入昵称";
    return false;
  } else if (!regName.test(nickName)) {
    document.getElementById("err_nick").innerHTML = "由2-6个汉字组成";
    return false;
  } else {
    document.getElementById("err_nick").innerHTML = "ok!!!";
    return true;
  }
}
//验证邮箱
function check_email() {
  var email = document.getElementById("email").value;
  var regEmail = /^\w+@\w+((\.\w+)+)$/;
  if (email == "" || email.trim() == "") {
    document.getElementById("err_email").innerHTML = "请输入邮箱";
    return false;
  } else if (!regEmail.test(email)) {
    document.getElementById("err_email").innerHTML = "邮箱账号@域名。如good@tom.com、whj@sina.com.cn";
    return false;
  } else {
    document.getElementById("err_email").innerHTML = "ok!!!";
    return true;
  }
}
//验证密码
function check_pwd() {
  var pwd = document.getElementById("pwd").value;
  var regPwd = /^\w{4,10}$/;
  if (pwd == "" || pwd.trim() == "") {
    document.getElementById("err_pwd").innerHTML = "请输入密码";
    return false;
  } else if (!regPwd.test(pwd)) {
    document.getElementById("err_pwd").innerHTML = "格式错误";
    return false;
  } else {
    document.getElementById("err_pwd").innerHTML = "ok!!!";
    return true;
  }
}
//确认密码
function check_pwd2() {
  var pwd = document.getElementById("pwd").value;
  var pwd2 = document.getElementById("pwd2").value;
  if (pwd2 == "" || pwd2.trim() == "") {
    document.getElementById("err_pwd2").innerHTML = "请输入密码";
    return false;
  } else if (!pwd2.equals(pwd)) {
    document.getElementById("err_pwd2").innerHTML = "两次输入密码不一致";
    return false;
  } else {
    document.getElementById("err_pwd2").innerHTML = "ok!!!";
    return true;
  }
}
//验证手机号
function check_phone() {
  var phone = document.getElementById("phone").value;
  var regPhone = /[13,15,18]\d{9}/;
  if (phone == "" || phone.trim() == "") {
    document.getElementById("err_phone").innerHTML = "请输入手机号";
    return false;
  } else if (!regPhone.test(phone)) {
    document.getElementById("err_phone").innerHTML = "手机号由11位数字组成，且以13,15,18开头";
    return false;
  } else {
    document.getElementById("err_phone").innerHTML = "ok!!!";
    return true;
  }
}
//验证时间
function check_date() {
  var birthday = document.getElementById("birthday").value;
  var regDate = /[13,15,18]\d{9}/;
  if (birthday == "" || birthday.trim() == "") {
    document.getElementById("err_date").innerHTML = "请输入日期";
    return false;
  } else if (!regDate.test(birthday)) {
    document.getElementById("err_date").innerHTML = "出生日期在1990-2009之间";
    return false;
  } else {
    document.getElementById("err_date").innerHTML = "ok!!!";
    return true;
  }
}

Jquery code

 $(function () {
      var errMsg;
      $.each($("input"), function (i, val) {
        $(val).blur(function () {
          if ($(val).attr("name") == "userName") {
            $(".nameMsg").remove();
            var userName = val.value;
            var regName = /[a-zA-Z]\w{4,16}/
            if (userName == "" || userName.trim() == "") {
              errMsg = "<span class=&#39;nameMsg&#39; style=&#39;color:red;&#39;>用户名不能为空</span>";
            } else if (!regName.test(userName)) {
              errMsg = "<span class=&#39;nameMsg&#39; style=&#39;color:red;&#39;>由英文字母和数字组成的4-16位字符，以字母开头</span>";
            } else {
              errMsg = "<span class=&#39;nameMsg&#39; style=&#39;color:red;&#39;>OK！</span>";
            }
            $(this).parent().append(errMsg);
          } else if ($(val).attr("name") == "nickName") {
            $(".nickMsg").remove();
            var nickName = val.value;
            var regName = /[\u4e00-\u9fa5]{2,6}/
            if (nickName == "" || nickName.trim() == "") {
              errMsg = "<span class=&#39;nickMsg&#39; style=&#39;color:red;&#39;>昵称不能为空</span>";
            } else if (!regName.test(nickName)) {
              errMsg = "<span class=&#39;nickMsg&#39; style=&#39;color:red;&#39;>由2-6个汉字组成</span>";
            } else {
              errMsg = "<span class=&#39;nickMsg&#39; style=&#39;color:red;&#39;>OK！</span>";
            }
            $(this).parent().append(errMsg);
          } else if ($(val).attr("name") == "email") {
            $(".emailMsg").remove();
            var email = val.value;
            var regEmail = /^\w+@\w+((\.\w+)+)$/;
            if (email == "" || email.trim() == "") {
              errMsg = "<span class=&#39;emailMsg&#39; style=&#39;color:red;&#39;>邮箱不能为空</span>";
            } else if (!regEmail.test(email)) {
              errMsg = "<span class=&#39;emailMsg&#39; style=&#39;color:red;&#39;>邮箱账号@域名。如good@tom.com、whj@sina.com.cn</span>";
            } else {
              errMsg = "<span class=&#39;emailMsg&#39; style=&#39;color:red;&#39;>OK！</span>";
            }
            $(this).parent().append(errMsg);
          } else if ($(val).attr("name") == "pwd") {
            $(".pwdMsg").remove();
            var pwd = val.value;
            var regPwd = /^\w{4,10}$/;
            if (pwd == "" || pwd.trim() == "") {
              errMsg = "<span class=&#39;pwdMsg&#39; style=&#39;color:red;&#39;>密码不能为空</span>";
            } else if (!regPwd.test(pwd)) {
              errMsg = "<span class=&#39;pwdMsg&#39; style=&#39;color:red;&#39;>格式错误</span>";
            } else {
              errMsg = "<span class=&#39;pwdMsg&#39; style=&#39;color:red;&#39;>OK！</span>";
            }
            $(this).parent().append(errMsg);
          } else if ($(val).attr("name") == "pwd2") {
            $(".pwd2Msg").remove();
            var pwd2 = val.value;
            var pwd = $("input")[3].value;
            if (pwd2 == "" || pwd2.trim() == "" || !pwd2.equals(pwd)) {
              errMsg = "<span class=&#39;pwd2Msg&#39; style=&#39;color:red;&#39;>两次输入密码不一致</span>";
            } else {
              errMsg = "<span class=&#39;pwd2Msg&#39; style=&#39;color:red;&#39;>OK！</span>";
            }
            $(this).parent().append(errMsg);
          } else if ($(val).attr("name") == "phone") {
            $(".phoneMsg").remove();
            var phone = val.value;
            var regPhone = /[13,15,18]\d{9}/;
            if (phone == "" || phone.trim() == "") {
              errMsg = "<span class = &#39;phoneMsg&#39; style = &#39;color:red;&#39; > 手机号不能为空 < /span>"
            } else if (!regPhone.test(phone)) {
              errMsg = "<span class = &#39;phoneMsg&#39; style = &#39;color:red;&#39; > 格式错误 < /span>"
            } else {
              errMsg = "<span class = &#39;phoneMsg&#39; style = &#39;color:red;&#39; > OK！ < /span>"
            }
            $(this).parent().append(errMsg);
          } else if ($(val).attr("name") == "date") {
            $(".dateMsg").remove();
            var birthday = val.value;
            var regDate = /(199\d|200\d)[-/](0\d|1[0-2])[-/](0\d|[1-2]\d|30|31)/;
            if (birthday == "" || birthday.trim() == "") {
              errMsg = "<span class=&#39;dateMsg&#39; style=&#39;color:red;&#39;>请输入生日</span>";
            } else if (!regDate.test(birthday)) {
              errMsg = "<span class=&#39;dateMsg&#39; style=&#39;color:red;&#39;>格式错误</span>";
            } else {
              errMsg = "<span class=&#39;dateMsg&#39; style=&#39;color:red;&#39;>OK！</span>";
            }
            $(this).parent().append(errMsg);
          }
        });
      });
    });

Related recommendations:

php user registration information uses regular expressions Type verification sample code

JQuery validate plug-in to verify user registration information_jquery

js simply implements the verification code of user registration information_javascript skills

The above is the detailed content of JS and jQuery registration information verification function implementation code. For more information, please follow other related articles on the PHP Chinese website!