cari

Rumah  >  Artikel  >  hujung hadapan web  >  JS和jQuery注册信息的验证功能实现代码

JS和jQuery注册信息的验证功能实现代码

小云云
小云云asal
2018-02-01 10:01:061638semak imbas

用JS和JQuery实现注册信息的验证功能的效果是一样的。本文通过实例代码给大家分享了基于js+jquery实现的注册信息验证功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧，希望能帮助到大家。

HTML代码


<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样式


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

JS代码


//验证用户名
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代码


 $(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);
          }
        });
      });
    });

相关推荐：

php用户注册信息使用正则表达式验证示例代码

JQuery validate插件验证用户注册信息_jquery

js简单实现用户注册信息的校验代码_javascript技巧

Atas ialah kandungan terperinci JS和jQuery注册信息的验证功能实现代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php jquery css 正则表达式 html JS
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Detector.js插件实现兼容性检测代码Artikel seterusnya：vue-cli中的ESlint配置文件eslintrc.js介绍

Artikel berkaitan

Lihat lagi