首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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

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

- Author -

小小蒜头

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jQuery实现简单轮播图效果
Dec 27 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
V Rising(1) Spring Security(2) maven(2) 记事本(1) 动态权限(1) Android Gradle(1) AOP(2) Kotlin(1) 自定义函数(1) Navicat(1)
You might like
ftp类(example.php)
2006/10/09 PHP
PHP集成FCK的函数代码
2008/09/27 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
清除输入框内的空格
2016/12/21 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
Python中的特殊语法：filter、map、reduce、lambda介绍
2015/04/14 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
python实现windows下文件备份脚本
2018/05/27 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
django 环境变量配置过程详解
2019/08/06 Python
python sorted方法和列表使用解析
2019/11/18 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
英国屋顶用品和材料超市：Roofing Supplies UK
2019/08/24 全球购物
电子商务应届生求职信
2013/11/16 职场文书
教师的实习鉴定
2013/12/15 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
销售助理岗位职责
2015/02/11 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android