JS和jQuery注册信息的验证功能实现代码

用js和jquery实现注册信息的验证功能的效果是一样的。本文通过实例代码给大家分享了基于js+jquery实现的注册信息验证功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能帮助到大家。

HTML代码

 请填写注册信息  

登录后复制

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 = "用户名不能为空";            } else if (!regName.test(userName)) {              errMsg = "由英文字母和数字组成的4-16位字符,以字母开头";            } else {              errMsg = "OK!";            }            $(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 = "昵称不能为空";            } else if (!regName.test(nickName)) {              errMsg = "由2-6个汉字组成";            } else {              errMsg = "OK!";            }            $(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 = "邮箱不能为空";            } else if (!regEmail.test(email)) {              errMsg = "邮箱账号@域名。如good@tom.com、whj@sina.com.cn";            } else {              errMsg = "OK!";            }            $(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 = "密码不能为空";            } else if (!regPwd.test(pwd)) {              errMsg = "格式错误";            } else {              errMsg = "OK!";            }            $(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 = "两次输入密码不一致";            } else {              errMsg = "OK!";            }            $(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 = " 手机号不能为空 "            } else if (!regPhone.test(phone)) {              errMsg = " 格式错误 "            } else {              errMsg = " OK! "            }            $(this).parent().append(errMsg);          } else if ($(val).attr("name") == "date") {            $(".dateMsg").remove();            var birthday = val.value;            var regDate = /(199d|200d)[-/](0d|1[0-2])[-/](0d|[1-2]d|30|31)/;            if (birthday == "" || birthday.trim() == "") {              errMsg = "请输入生日";            } else if (!regDate.test(birthday)) {              errMsg = "格式错误";            } else {              errMsg = "OK!";            }            $(this).parent().append(errMsg);          }        });      });    });

登录后复制

相关推荐:

php用户注册信息使用正则表达式验证示例代码

JQuery validate插件验证用户注册信息_jquery

js简单实现用户注册信息的校验代码_javascript技巧

以上就是JS和jQuery注册信息的验证功能实现代码的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2787945.html

(0)
上一篇 2025年3月8日 18:18:51
下一篇 2025年2月18日 02:10:50

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论