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

2023-09-24 03:01:05 173

用JS和JQuery实现的效果是一样的。

HTML代码

请填写注册信息



用户名：




昵称：




邮箱：




密码：




确认密码：




手机号码：




出生日期：

CSS样式

body{
text-align:center;
padding:0;
margin:0;
}
fieldset{
width:800px;
}
tabletrtd~td{
text-align:left;
width:600px;
}

JS代码

//验证用户名
functioncheck_userName(){
varuserName=document.getElementById("name").value;
varregName=/[a-zA-Z]\w{4,16}/
if(userName==""||userName.trim()==""){
document.getElementById("err_name").innerHTML="请输入用户名";
returnfalse;
}elseif(!regName.test(userName)){
document.getElementById("err_name").innerHTML="由英文字母和数字组成的4-16位字符，以字母开头";
returnfalse;
}else{
document.getElementById("err_name").innerHTML="ok!!!";
returntrue;
}
}
//验证昵称
functioncheck_nickName(){
varnickName=document.getElementById("nick").value;
varregName=/[\u4e00-\u9fa5]{2,6}/
if(nickName==""||nickName.trim()==""){
document.getElementById("err_nick").innerHTML="请输入昵称";
returnfalse;
}elseif(!regName.test(nickName)){
document.getElementById("err_nick").innerHTML="由2-6个汉字组成";
returnfalse;
}else{
document.getElementById("err_nick").innerHTML="ok!!!";
returntrue;
}
}
//验证邮箱
functioncheck_email(){
varemail=document.getElementById("email").value;
varregEmail=/^\w+@\w+((\.\w+)+)$/;
if(email==""||email.trim()==""){
document.getElementById("err_email").innerHTML="请输入邮箱";
returnfalse;
}elseif(!regEmail.test(email)){
document.getElementById("err_email").innerHTML="邮箱账号@域名。如good@tom.com、whj@sina.com.cn";
returnfalse;
}else{
document.getElementById("err_email").innerHTML="ok!!!";
returntrue;
}
}
//验证密码
functioncheck_pwd(){
varpwd=document.getElementById("pwd").value;
varregPwd=/^\w{4,10}$/;
if(pwd==""||pwd.trim()==""){
document.getElementById("err_pwd").innerHTML="请输入密码";
returnfalse;
}elseif(!regPwd.test(pwd)){
document.getElementById("err_pwd").innerHTML="格式错误";
returnfalse;
}else{
document.getElementById("err_pwd").innerHTML="ok!!!";
returntrue;
}
}
//确认密码
functioncheck_pwd2(){
varpwd=document.getElementById("pwd").value;
varpwd2=document.getElementById("pwd2").value;
if(pwd2==""||pwd2.trim()==""){
document.getElementById("err_pwd2").innerHTML="请输入密码";
returnfalse;
}elseif(!pwd2.equals(pwd)){
document.getElementById("err_pwd2").innerHTML="两次输入密码不一致";
returnfalse;
}else{
document.getElementById("err_pwd2").innerHTML="ok!!!";
returntrue;
}
}
//验证手机号
functioncheck_phone(){
varphone=document.getElementById("phone").value;
varregPhone=/[13,15,18]\d{9}/;
if(phone==""||phone.trim()==""){
document.getElementById("err_phone").innerHTML="请输入手机号";
returnfalse;
}elseif(!regPhone.test(phone)){
document.getElementById("err_phone").innerHTML="手机号由11位数字组成，且以13,15,18开头";
returnfalse;
}else{
document.getElementById("err_phone").innerHTML="ok!!!";
returntrue;
}
}
//验证时间
functioncheck_date(){
varbirthday=document.getElementById("birthday").value;
varregDate=/[13,15,18]\d{9}/;
if(birthday==""||birthday.trim()==""){
document.getElementById("err_date").innerHTML="请输入日期";
returnfalse;
}elseif(!regDate.test(birthday)){
document.getElementById("err_date").innerHTML="出生日期在1990-2009之间";
returnfalse;
}else{
document.getElementById("err_date").innerHTML="ok!!!";
returntrue;
}
}

Jquery代码

$(function(){
varerrMsg;
$.each($("input"),function(i,val){
$(val).blur(function(){
if($(val).attr("name")=="userName"){
$(".nameMsg").remove();
varuserName=val.value;
varregName=/[a-zA-Z]\w{4,16}/
if(userName==""||userName.trim()==""){
errMsg="用户名不能为空";
}elseif(!regName.test(userName)){
errMsg="由英文字母和数字组成的4-16位字符，以字母开头";
}else{
errMsg="OK！";
}
$(this).parent().append(errMsg);
}elseif($(val).attr("name")=="nickName"){
$(".nickMsg").remove();
varnickName=val.value;
varregName=/[\u4e00-\u9fa5]{2,6}/
if(nickName==""||nickName.trim()==""){
errMsg="昵称不能为空";
}elseif(!regName.test(nickName)){
errMsg="由2-6个汉字组成";
}else{
errMsg="OK！";
}
$(this).parent().append(errMsg);
}elseif($(val).attr("name")=="email"){
$(".emailMsg").remove();
varemail=val.value;
varregEmail=/^\w+@\w+((\.\w+)+)$/;
if(email==""||email.trim()==""){
errMsg="邮箱不能为空";
}elseif(!regEmail.test(email)){
errMsg="邮箱账号@域名。如good@tom.com、whj@sina.com.cn";
}else{
errMsg="OK！";
}
$(this).parent().append(errMsg);
}elseif($(val).attr("name")=="pwd"){
$(".pwdMsg").remove();
varpwd=val.value;
varregPwd=/^\w{4,10}$/;
if(pwd==""||pwd.trim()==""){
errMsg="密码不能为空";
}elseif(!regPwd.test(pwd)){
errMsg="格式错误";
}else{
errMsg="OK！";
}
$(this).parent().append(errMsg);
}elseif($(val).attr("name")=="pwd2"){
$(".pwd2Msg").remove();
varpwd2=val.value;
varpwd=$("input")[3].value;
if(pwd2==""||pwd2.trim()==""||!pwd2.equals(pwd)){
errMsg="两次输入密码不一致";
}else{
errMsg="OK！";
}
$(this).parent().append(errMsg);
}elseif($(val).attr("name")=="phone"){
$(".phoneMsg").remove();
varphone=val.value;
varregPhone=/[13,15,18]\d{9}/;
if(phone==""||phone.trim()==""){
errMsg="手机号不能为空"
}elseif(!regPhone.test(phone)){
errMsg="格式错误"
}else{
errMsg="OK！"
}
$(this).parent().append(errMsg);
}elseif($(val).attr("name")=="date"){
$(".dateMsg").remove();
varbirthday=val.value;
varregDate=/(199\d|200\d)[-/](0\d|1[0-2])[-/](0\d|[1-2]\d|30|31)/;
if(birthday==""||birthday.trim()==""){
errMsg="请输入生日";
}elseif(!regDate.test(birthday)){
errMsg="格式错误";
}else{
errMsg="OK！";
}
$(this).parent().append(errMsg);
}
});
});
});

总结

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

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

热门推荐

随机推荐