jquery注册页面

Posted 2021-04-08 三人之一

三人之一

This browser does not support music or audio playback. Please play it in WeChat or another browser.

正文共：9394字（包括代码），5图

预计阅读时间：24分钟（算上看代码时间）

最近新学习的新代码

即jquery版本的注册页面验证

那么呢

neutrino是个人狠话不多的酷girl,

haha 

所以，开始吧

laydate插件：

链接：https://pan.baidu.com/s/1mDGtgz-Be0CGVYA46CyDew

提取码：x02x

images文件;

链接：https://pan.baidu.com/s/1MipjYuNae7MxsRvXhtg0AQ

提取码：zrhg

jquery.js:

链接：https://pan.baidu.com/s/1nv4DPwpMxziweuxuP4Z5dQ

提取码：2oh4

整个项目：

链接：https://pan.baidu.com/s/17IejSzkkZecAtS-eC1sw2Q

提取码：1c5j

js

//register.js,主要实现验证$(document).ready(function(){ //绑定失去焦点事件 $("#username").blur(checkUsername); $("#passw").blur(checkPassw); $("#passw_confirm").blur(checkPassw_confirm); $("#email").blur(checkEmail); $("#phone").blur(checkPhone); $("#sc_card_num").blur(checkSc_card_num); $(".laydate-icon").blur(changeDateColor);   // 提交表单,调用验证函数 $("#register_form").submit(function () {//提交表格触发事件 if (checkUsername() && checkPassw() && checkPassw_confirm() && checkEmail()&&checkPhone()&&checkSc_card_num()){ //判断所有的事件是否成功 return true;//通过，跳转 } else return false;//不通过 });  // 重设表单，清空错误信息 $("#reset1").click(function(){//在reset里面定义一个点击事件 $("span").text(""); //清空错误信息 });   $(":input").keydown(function(){//按下键盘，触发事件 $(this).css("background-color","yellow");//附加css事件 }) $(":input").keyup(function(){//松开键盘，触发事件 $(this).css("background-color","pink");//附加css事件 }) $(":input").mousedown(function(){ $(this).css("background-color","blue"); }) $(":input").mouseup(function(){ $(this).css("background-color","green"); }) })  //验证用户名 function checkUsername() { $("input").css("background-color","white");//变回原色 var $username = $("#username");//拿到用户名 var $username_errorTips = $("#username_errorTips");//拿到错误信息 $username_errorTips.html("");//清空错误信息 if ($username.val() == "") {//如果用户名为空 $username_errorTips.html("姓名不能为空");//赋予错误信息给$username_errorTips return false;//不通过 }// for (var i = 0; i < $username.val().length; i++) {//遍历检查// var j = $username.val().substring(i, i + 1)//得到$username里i到i+1的字符串// if (j >= 0) {//有数字// $username_errorTips.html("姓名中不能包含数字");//赋予错误信息给$username_errorTips// return false;//不通过// }// } if($username.val().length<6 || $username.val().length>15){//判断长度 $username_errorTips.html("用户名长度必须在6~15之间");//赋予错误信息给$username_errorTips  return false;//验证不通过 } return true;//符合，验证通过 }
 //验证输入密码 function checkPassw() { $("input").css("background-color","white");//变回原色 var $passw = $("#passw");//获取密码 var $pass_errorTips = $("#pass_errorTips");//获取错误信息 $pass_errorTips.html("");//清空信息 if ($passw.val() == "") {//判断密码是否为空 $pass_errorTips.html("密码不能为空");//赋予错误信息给$pass_errorTips return false;//不通过 } if ($passw.val().length < 6) {//判断长度 $pass_errorTips.html("密码必须等于或大于6个字符");//赋予错误信息给$pass_errorTips return false;//不通过 } return true;//通过，验证通过 }  //验证重复密码 function checkPassw_confirm() { $("input").css("background-color","white");//变回原色 var $passw = $("#passw"); //输入密码 var $passw_confirm = $("#passw_confirm"); //再次输入密码 var $passw_errorTips = $("#passw_errorTips");//获取错误信息 $passw_errorTips.html("");//清空错误信息 if ($passw.val() != $passw_confirm.val()) {//判断两次密码是否一致 $passw_errorTips.html("密码与确认密码不一致");//赋予错误信息给$passw_errorTips return false;//不通过 } return true;//通过，验证成功 }   //验证Email function checkEmail() { $("input").css("background-color","white");//变回原色 var $email = $("#email");//获取email var $email_errorTips = $("#email_errorTips");//获取错误信息 $email_errorTips.html("");//清空错误信息 if ($email.val() == "") {//判断email是否为空 $email_errorTips.html("Email不能为空");//赋予错误信息给$email_errorTips return false;//不通过 } //js文件里面写正则表达式，需要用/正则表达式/的形式表示 var reg=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/ //使用“^”匹配邮箱的开始部分 //开头是字母数字-_+@字母数字—_+.字母数字-_ //用“$”匹配邮箱结束部分以保证邮箱前后不能有其他字符 if(reg.test($email.val())==false){ $email_errorTips.html("电子邮箱格式错误");//赋予错误信息给$email_errorTips return false;//不通过 } return true;//通过，验证成功 }  //改变时间颜色 function changeDateColor(){ $(this).css("background-color","white"); }  //验证联系电话 function checkPhone(){ $("input").css("background-color","white");//变回原色 var $phone =$("#phone");//获取电话号码 var $phone_errorTips = $("#phone_errorTips");//获取错误信息 $phone_errorTips.html("");//清空错误信息 var reg=/^((0d{2,3}-d{7,8})|(1[3584]d{9}))$/ //固定电话是由区号和号码组成，区号是以 0 开头的，后面是 2~3 位数，因此在匹配区号的时候可以使用正则表达式0d{2,3}。固定电话号码由 7~8 位数字组成，因此可以使用表达式d{7,8}来进行匹配 //手机号码是 11 位数，并且以数字 1 开头。考虑到手机号码的特殊性，该正则表达式验证以 13 或 15 或18或14开头的手机号码； if(reg.test($phone.val()) == false)//判断是否符合正则表达式 { $phone_errorTips.html("电子号码格式错误");//赋予错误信息给$phone_errorTips return false;//不通过 } return true;//通过，验证成功 }  //验证身份证 function checkSc_card_num(){ $("input").css("background-color","white");//变回原色 var $sc_card_num = $("#sc_card_num");//获取身份证号 var $card_errorTips = $("#card_errorTips");//获取错误信息 $card_errorTips.html("");//清空错误信息 var reg = /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/; //验证正则表达式，15位，18位或17位+x if(reg.test($sc_card_num.val() ) == false) //判断是否符合正则表达式 {  $card_errorTips.html("身份证号码格式错误");//赋予错误信息给$card_errorTips return false; //不通过 }  return true;//通过，验证成功 }

jquery.js就可以上网搜，如果不想搜，可以将<script type="text/javascript" ></script>改成

<script ></script>就可以了

html

<!--register.html--><html> <head> <meta charset="utf-8" /> <title>用户注册</title> <link rel="stylesheet" type="text/css" href="css/headFoot.css"> <link rel="stylesheet" type="text/css" href="css/login.css"> <script type="text/javascript" src="js/laydate/laydate.js"></script> <script type="text/javascript" src="js/verify.js" ></script> <link rel="stylesheet" type="text/css" href="css/verify.css"> </head><!--要求包含：用户名、密码、确认密码（填写的时候要求与密码一致）、电话、身份证号码、性别、出生日期等信息。对用户注册页面中的输入数据进行合法性验证，包括字段空的验证、长度验证，身份证验证、密码与确认密码字段值的一致性验证、电话号码验证等。--> <body> <div id="header"> <div id="logo"> <!--<img border="0"/><br/>--> <!--<span>2019年春学期 &nbsp;&nbsp;&nbsp;&nbsp;</span>--> </div> <!-- <div id="banner">好好学习，天天向上</div>--> <!--<img id="computer" align="middle" />--></div><!-- end header --><div id="page"> <!-- <br /><br /><br /><br />--> <div id="login"> <div id="title"> <h1><!--<img width="32" height="32" align="middle" style="padding-bottom:13px"/>-->&nbsp;用户注册</h1> </div>  <div id="errorTips"></div> <form action="index.html" method="get" enctype="multipart/form-data" name="register_form" id="register_form"><!--method="post"可以跳转过去，但是不能显示内容--> <table border="0" style="margin: 0 0 0 25%"> <tr> <td> 用户名： </td> <td> <input name="username" type="text" maxlength="10" id="username" /> <span id="username_errorTips" ></span> </td> </tr> <tr> <td> 密&nbsp;&nbsp;码： </td> <td> <input name="passw" type="password" maxlength="10" id="passw" /> <span id="pass_errorTips"></span> </td> </tr> <tr> <td> 确认密码： </td> <td> <input name="passw_confirm" type="password" maxlength="10" id="passw_confirm" /> <span id="passw_errorTips"></span> </td> </tr> <tr> <td> 邮&nbsp;&nbsp;箱： </td> <td> <input name="email" type="text" maxlength="20" id="email" /> <span id="email_errorTips"></span> </td> </tr> <tr> <td> 出生日期： </td> <td> <input onclick="laydate()" class="laydate-icon"> </td> </tr> <tr> <td> 联系电话： </td> <td> <input name="phone" type="text" maxlength="20" id="phone" /> <span id="phone_errorTips"></span> </td> </tr> <tr> <td> 性&nbsp;&nbsp;别： </td> <td> <input name="sex" type="radio" value="female" /> 女 <input name="sex" type="radio" value="male" /> 男 </td> </tr> <tr> <td> 身&nbsp;份&nbsp;证： </td> <td> <input name="iD_card" type="text" maxlength="20" id="sc_card_num" /> <span id="card_errorTips"></span> </td> </tr> <tr> <td> <div align="center"> <input name="submit" type="submit" value="注册" /> </div> </td> <td> <div align="center"> <input name="reset" type="reset" value="重填" id="reset1"/> </div> </td> </tr> </table> </form> <div id="btm"><div id="l"><div id="r"></div></div> </div> </div><!-- end login --> </div><!-- end page --><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/register.js"></script><!--<br /><br /><br /><br /><div id="footer"> <p>&copy;班级：姓名：学号：制作 <a href="#">学院网站</a></p></div> <!-- end footer -->-->  </body></html>

日期里面用到laydate插件，大家上网搜一下哈,或者访问我上面的链接获取

css

/*headFoot.css*//* CSS Document */body, td, th { font-family: ����; font-size:12px; color: #666666;}body{ /*background-color:#C3C3C3; background-image: url(../images/img01.gif);*/ /*background-image:url(../images/beijing.jpg);*/ background-color: pink; background-repeat: repeat-x; margin: 0px;}#header{ height: 110px; margin:0 auto; /*background-image: url(../images/bg0.gif);*/ /* background-image: url(../images/beijing.jpg);*/ background-repeat: repeat-x;}
#header #logo { float: left;padding-top: 16px;padding-left: 24px;}#header #logo span { color: #0C6785; font-weight: bold; font-size: 14px; line-height: normal; letter-spacing: 1px; font-family: Arial;}#header #banner { font-family: "����"; font-size: 46px; color: #FF0000; float: left; margin-left: 50px; padding-top: 23px;}#header #computer { margin:5px 5px 0 0;float: right;}
#footer { background-image: url(../images/img02.gif); background-repeat:  repeat-x;text-align: center; background-color: #E0ECFF; clear:both; padding: 20px 0;}span{ color: #F32043;}

/*login.css*//* CSS Document */#page #login #form1 #content { text-align: center; padding-top: 20px;}#page { width: 98%; margin: 0 auto;}#page #login { background-color: #FFFFFF; background-image: url(../images/img03.png); background-repeat: repeat-x; width: 500px; margin-right: auto; margin-left: auto;}#page #login #title { background-image: url(../images/img04.png); background-repeat: no-repeat; letter-spacing: 1px; height: 60px; text-align: center;}#page #login #title h1 { font-size: 23px; font-weight: bold; color: #FFFFFF; background-image: url(../images/img05.png); background-repeat: no-repeat; margin: 0px;/* padding: 3px;*/ background-position: right top;}#page #login #form1 #content ul { margin: 0px; list-style-type: none;}#page #login #form1 #content li { height: 30px;}
#page #login #btm #l { background-image: url(../images/img07.gif); background-repeat: no-repeat; background-position: left bottom; height: 10px;}#page #login #btm #l #r { background-image: url(../images/img08.gif); background-repeat: no-repeat; background-position: right bottom; height: 10px;}

讲到这里就要告一段落啦，各位小伙伴们，886

扫它，哈哈	编辑	neutrino
	代码来源	Aquarius
	视频剪辑	简单一个人
	图文样式	壹伴
	今日歌手	胡夏