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 

相关文章： PHP正则匹配日期和时间(时间戳转换)的实例代码  北京的网站制作公司有哪些,哪个视频网站最好？  简历在线制作网站免费,免费下载个人简历的网站是哪些？  高防服务器租用指南：配置选择与快速部署攻略  高性能网站服务器部署指南：稳定运行与安全配置优化方案  如何快速上传自定义模板至建站之星？  北京专业网站制作设计师招聘,北京白云观官方网站？  教学网站制作软件,学习*后期制作的网站有哪些？  网站制作壁纸教程视频,电脑壁纸网站？  山东网站制作公司有哪些,山东大源集团官网？  微信小程序 五星评分(包括半颗星评分)实例代码  jQuery 常见小例汇总  如何确保西部建站助手FTP传输的安全性？  如何在VPS电脑上快速搭建网站？  洛阳网站制作公司有哪些,洛阳的招聘网站都有哪些？  百度网页制作网站有哪些,谁能告诉我百度网站是怎么联系？  如何选择最佳自助建站系统？快速指南解析优劣  建站之星价格显示格式升级，你的预算足够吗？  制作网站的网址是什么,请问后缀为.com和.com.cn还有.cn的这三种网站是分别是什么类型的网站？  已有域名和空间如何快速搭建网站？  php json中文编码为null的解决办法  已有域名和空间，如何快速搭建网站？  如何在阿里云ECS服务器部署织梦CMS网站？  建站中国必看指南：CMS建站系统+手机网站搭建核心技巧解析  头像制作网站在线制作软件,dw网页背景图像怎么设置？  ,怎么在广州志愿者网站注册？  香港服务器建站指南：免备案优势与SEO优化技巧全解析  建站之星上传入口如何快速找到？  我的世界制作壁纸网站下载,手机怎么换我的世界壁纸？  阿里云网站搭建费用解析：服务器价格与建站成本优化指南  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  php能控制zigbee模块吗_php通过串口与cc2530 zigbee通信【介绍】  如何通过商城自助建站源码实现零基础高效建站？  定制建站模板如何实现SEO优化与智能系统配置？18字教程  如何通过WDCP绑定主域名及创建子域名站点？  佛山网站制作系统,佛山企业变更地址网上办理步骤？  制作网站的软件免费下载,免费制作app哪个平台好？  官网建站费用明细查询_企业建站套餐价格及收费标准指南  制作销售网站教学视频,销售网站有哪些？  网站规划与制作是什么,电子商务网站系统规划的内容及步骤是什么？  如何构建满足综合性能需求的优质建站方案？  如何通过建站之星自助学习解决操作问题？  如何快速搭建支持数据库操作的智能建站平台？  网站制作哪家好,cc、.co、.cm哪个域名更适合做网站？  建站之星五站合一营销型网站搭建攻略，流量入口全覆盖优化指南  Python文件管理规范_工程实践说明【指导】  如何在万网开始建站？分步指南解析  如何选择香港主机高效搭建外贸独立站？  香港服务器网站卡顿？如何解决网络延迟与负载问题？  网页制作模板网站推荐,网页设计海报之类的素材哪里好？