首页
所有分类
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 相关文章推荐
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery操作动画完整实例分析
Jan 10 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
三角函数(1) 动态代理(1) Dijkstra(1) Android Studio(4) cv2(1) 优先队列(1) MyBatis(5) seata(1) nacos(1) 迪杰斯特拉(1)
You might like
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
php检测文本的编码
2015/07/26 PHP
三个思路解决laravel上传文件报错：413 Request Entity Too Large问题
2017/11/13 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
JS 自动安装exe程序
2008/11/30 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
python ip正则式
2009/05/07 Python
go和python调用其它程序并得到程序输出
2014/02/10 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
python 的列表遍历删除实现代码
2020/04/12 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Python如何使用input函数获取输入
2020/08/06 Python
MANGO官方网站：西班牙芒果服装品牌
2017/01/15 全球购物
法国在线药房：DoctiPharma
2020/10/21 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
会计实习生工作总结的自我评价
2013/10/07 职场文书
自我评价怎么写正确呢？
2013/12/02 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
神农溪导游词
2015/02/11 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis
Python实现聚类K-means算法详解
2022/07/15 Python