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

用JS和JQuery实现的效果是一样的。HTML代码<legend>请填写注册信息</legend><formaction="

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