JS+jQuery实现注册信息的验证功能


Posted in jQuery onSeptember 26, 2017

用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实现注册信息的验证功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 #jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 #jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 #jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 #jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 #jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 #jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 #jQuery
You might like
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
拖拉表格的JS函数
2008/11/20 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
react+redux仿微信聊天界面
2019/06/21 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
python删除字符串中指定字符的方法
2018/08/13 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
python可视化实现KNN算法
2019/10/16 Python
jupyter notebook 重装教程
2020/04/16 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
巴西本土电商平台:Americanas
2020/06/21 全球购物
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
大学生写自荐信的技巧
2014/01/08 职场文书
医药销售自荐书
2014/05/29 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
银行求职信模板
2015/03/20 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle