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='nameMsg' style='color:red;'>用户名不能为空</span>";
            } else if (!regName.test(userName)) {
              errMsg = "<span class='nameMsg' style='color:red;'>由英文字母和数字组成的4-16位字符，以字母开头</span>";
            } else {
              errMsg = "<span class='nameMsg' style='color:red;'>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='nickMsg' style='color:red;'>昵称不能为空</span>";
            } else if (!regName.test(nickName)) {
              errMsg = "<span class='nickMsg' style='color:red;'>由2-6个汉字组成</span>";
            } else {
              errMsg = "<span class='nickMsg' style='color:red;'>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='emailMsg' style='color:red;'>邮箱不能为空</span>";
            } else if (!regEmail.test(email)) {
              errMsg = "<span class='emailMsg' style='color:red;'>邮箱账号@域名。如good@tom.com、whj@sina.com.cn</span>";
            } else {
              errMsg = "<span class='emailMsg' style='color:red;'>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='pwdMsg' style='color:red;'>密码不能为空</span>";
            } else if (!regPwd.test(pwd)) {
              errMsg = "<span class='pwdMsg' style='color:red;'>格式错误</span>";
            } else {
              errMsg = "<span class='pwdMsg' style='color:red;'>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='pwd2Msg' style='color:red;'>两次输入密码不一致</span>";
            } else {
              errMsg = "<span class='pwd2Msg' style='color:red;'>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 = 'phoneMsg' style = 'color:red;' > 手机号不能为空 < /span>"
            } else if (!regPhone.test(phone)) {
              errMsg = "<span class = 'phoneMsg' style = 'color:red;' > 格式错误 < /span>"
            } else {
              errMsg = "<span class = 'phoneMsg' style = 'color:red;' > 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='dateMsg' style='color:red;'>请输入生日</span>";
            } else if (!regDate.test(birthday)) {
              errMsg = "<span class='dateMsg' style='color:red;'>格式错误</span>";
            } else {
              errMsg = "<span class='dateMsg' style='color:red;'>OK！</span>";
            }
            $(this).parent().append(errMsg);
          }
        });
      });
    });

总结

以上所述是小编给大家介绍的JS+jQuery实现注册信息的验证功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# js  # jquery  # 注册信息验证  # 注册  # 验证  # JS实现验证码倒计时的注册页面  # js注册时输入合法性验证方法  # js实现登录注册框手机号和验证码校验（前端部分）  # JS实现用户注册时获取短信验证码和倒计时功能  # js正则表达式注册页面表单验证  # JavaScript实现表单注册、表单验证、运算符功能  # 请输入  # 为空  # 英文字母  # 出生日期  # 两次  # 小编  # 输入密码  # 在此  # 给大家  # 请填写  # 所述  # 给我留言  # 感谢大家  # 疑问请  # 有任何  # 是一样的  # phone  # cn  # sina  # whj 

相关文章： 广州网站制作公司哪家好一点,广州欧莱雅百库网络科技有限公司官网？  网站专业制作公司,网站编辑是做什么的？好做吗？工作前景如何？  如何在IIS管理器中快速创建并配置网站？  制作证书网站有哪些,全国城建培训中心证书查询官网？  深圳网站制作的公司有哪些,dido官方网站？  网站制作与设计教程,如何制作一个企业网站，建设网站的基本步骤有哪些？  建站之星如何取消后台验证码生成？  免费ppt制作网站,有没有值得推荐的免费PPT网站？  常州企业网站制作公司,全国继续教育网怎么登录？  表情包在线制作网站免费,表情包怎么弄？  微网站制作教程,不会写代码，不会编程，怎么样建自己的网站？  学校建站服务器如何选型才能满足性能需求？  建站之星如何快速解决建站难题？  如何选择服务器才能高效搭建专属网站？  javascript中对象的定义、使用以及对象和原型链操作小结  网站制作难吗安全吗,做一个网站需要多久时间？  网站制作服务平台,有什么网站可以发布本地服务信息？  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  如何快速搭建高效WAP手机网站？  智能起名网站制作软件有哪些,制作logo的软件？  建站主机如何选？高性价比方案全解析  如何在橙子建站中快速调整背景颜色？  盐城做公司网站,江苏电子版退休证办理流程？  高端建站如何打造兼具美学与转化的品牌官网？  网站制作需要会哪些技术,建立一个网站要花费多少？  建站主机选虚拟主机还是云服务器更好？  云南网站制作公司有哪些,云南最好的招聘网站是哪个？  制作旅游网站html,怎样注册旅游网站？  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  如何用低价快速搭建高质量网站？  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  如何快速生成ASP一键建站模板并优化安全性？  网站制作模板下载什么软件,ppt模板免费下载网站？  建站之星如何快速生成多端适配网站？  婚礼视频制作网站,学习*后期制作的网站有哪些？  建站主机无法访问？如何排查域名与服务器问题  美食网站链接制作教程视频,哪个教做美食的网站比较专业点？  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  如何在企业微信快速生成手机电脑官网？  ,怎么在广州志愿者网站注册？  七夕网站制作视频,七夕大促活动怎么报名？  建站主机选哪家性价比最高？  XML的“混合内容”是什么 怎么用DTD或XSD定义  建站之星后台管理如何实现高效配置？  linux top下的 minerd 木马清除方法  高防服务器租用首荐平台，企业级优惠套餐快速部署  教程网站设计制作软件,怎么创建自己的一个网站？  相亲简历制作网站推荐大全,新相亲大会主持人小萍萍资料？  如何在腾讯云服务器快速搭建个人网站？  图册素材网站设计制作软件,图册的导出方式有几种？