这次给大家带来怎样用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); } }); }); });
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
asp.net+jquery.form做出图片异步上传功能
怎么在jQuery里使用循环
以上就是怎样用JS+jQuery做出注册信息验证的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2769000.html
