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 = " 手机号不能为空 < /span>"
     } else if (!regPhone.test(phone)) {
errMsg = " 格式错误 < /span>"
     } else {
errMsg = " OK！ < /span>"
     }
     $(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);
   }
 });
      });
    });

总结

以上所述是小编给大家介绍的JS+jQuery实现注册信息的验证功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！