当前位置：移动技术网 > IT编程>开发语言>JavaScript > JS+jQuery实现注册信息的验证功能

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

2017年12月12日 | 移动技术网IT编程 | 我要评论

用js和jquery实现的效果是一样的。

html代码

<legend> 请填写注册信息</legend>
  <form action="" 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初学必须要理解的基础知识

1、第一个javascript程序程序书写的位置JavaScript也是一个纯文本的语言。在页面中，<sc... [阅读全文]
JSON的简要解析

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。... [阅读全文]
使用D3.js进行Neo4j数据的前端展示

背景:目前存在这样的需求，需要Neo4j图数据库存储表级血缘关系，血缘关系图要在前端页面进行展示；Neo4j自带... [阅读全文]
Ajax中get和post方法

ajax()方法$.ajax({url:请求地址type:"get | post | put | delete ... [阅读全文]
荐 vue基础及高级用法（一）

1. 插值表达式{{xxx}}的形式，可以是值，也可以是表达式（不能是 js 语句，比如if、for）<d... [阅读全文]
荐 AJAX初识Day1——POST & GET请求

AJAX1. 简介AJAX（Asynchronous JavaScript and XML ），最早出现在 05... [阅读全文]
海创软件组-20200712-学习过程中的记录

前端基础补足HTML5/CSS 部分1.搜索引擎的搜索问题2.图片的格式问题3. 盒子模型中的margin垂直方... [阅读全文]
JavaScript JS数组的操作

JavaScript JS数组的操作数组的操作数据的循环本质上是。通过生成索引的下标来获取数组中的每一个单元... [阅读全文]
海创软件组--20200712--axios上传文件获取进度--js对多个四边形的点对象数组分别按顺时针排序--定义上传视频并可预览

文章目录1：axios上传文件获取进度2：js对多个四边形的点对象数组分别按顺时针排序1：axios上传文件获取... [阅读全文]
用原生js-对ajax封装

function ajax(methods, url, callback, params) { //1.创... [阅读全文]

网友评论


验证码：

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

2017年12月12日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论