先来看看最终结果吧
html相关
这里我使用的是我之前写的一个商城项目中的注册页面，完整项目文件见AntMall
<!--头部-->
<div id="reg_header">
<div class="reg_h_center">
<div class="reg_h_left">
<img src="img/logo.png" alt="" />
<h4>欢迎注册</h4>
</div>
<div class="reg_h_right">
<a href="login.html">请登录</a>
<span>已有帐户</span>
</div>
</div>
</div>
<!--表单内容-->
<div id="reg_content">
<div class="reg_content_left">
<form action="#" id="form">
<div class="userName">
<label>用户名</label>
<input type="text" id="username" placeholder="请输入用户名" />
<span id="s_username" class="error"></span>
</div>
<div class="passWord">
<label>密码</label>
<input type="password" id="password" placeholder="请输入密码" />
<span id="s_password" class="error"></span>
</div>
<div class="passWord">
<label>确认密码</label>
<input type="password" id="repassword" placeholder="请确认密码" />
<span id="s_repassword" class="error"></span>
</div>
<div class="sex">
<label>性别</label>
<input type="radio"id="male"name="sex"/>
<label for="male">男</label>
<input type="radio"id="female"name="sex"/>
<label for="female">女</label>
</div>
<div class="phoneNum">
<label>手机号</label>
<input type="text" id="phonenum" placeholder="请输入电话号码" />
<span id="s_phonenum" class="error"></span>
</div>
<div class="code">
<label>验证码</label>
<input type="text" value="" placeholder="请输入验证码（不区分大小写）" class="input-val">
<canvas id="canvas" width="100" height="30"></canvas>
</div>
<div class="sub_res">
<input type="submit" value="立即注册" id="btn"/>
<input type="reset" value="重置">
</div>
</form>
</div>
<div class="reg_content_right">
<a href="">
<img src="img/reg_right.png" alt=""/>
</a>
</div>
</div>
<!--尾部-->
<div id="footer">
<!--链接-->
<div class="link">
<a href="">关于我们</a>
|<a href="">练习我们</a>
|<a href="">人才联盟</a>
|<a href="">商家入驻</a>
|<a href="">广告服务</a>
|<a href="">手机蚂蚁</a>
|<a href="">友情联盟</a>
|<a href="">销售联盟</a>
|<a href="">蚂蚁公益</a>
</div>
<!--版权-->
<div class="copyright">
Copyright © 2017-2018 码蚁My.comk 版权所有
</div>
</div>
</body>
css相关
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*目的是为了清空标签默认设置*/
body {
background-color: #F5F5F5;
}
.yuan {
color: #FF4400;
font-size: 10px;
}
.price {
color: #FF4400;
font-weight: bold;
margin-left: 3px;
}
#footer {
text-align: center;
}
#footer .link a {
margin-left: 5px;
margin-right: 5px;
color: #666;
}
#footer .copyright {
margin-top: 20px;
}
body {
background: white;
}
#reg_header {
height: 110px;
/*默认width为100%*/
/*background: red;*/
box-shadow: 5px 0px 5px #CCCCCC;
/*设置阴影 x轴水平方向的偏移量， y轴方向的偏移量，模糊程度 颜色*/
}
#reg_header .reg_h_center {
width: 1200px;
height: 110px;
margin: 0 auto;
/*background: blue;*/
display: flex;
}
#reg_header .reg_h_center .reg_h_left {
height: 110px;
/*background: green;*/
flex: 1;
}
#reg_header .reg_h_center .reg_h_left img {
width: 160px;
height: 100px;
float: left;
}
#reg_header .reg_h_center .reg_h_left h4 {
float: left;
margin-top: 70px;
font-size: 20px;
margin-left: 20px;
}
#reg_header .reg_h_center .reg_h_right {
height: 110px;
/*background: yellow;*/
flex: 1;
text-align: right;
padding-top: 60px;
padding-right: 20px;
}
#reg_header .reg_h_center .reg_h_right a {
float: right;
text-decoration: none;
font-size: 15px;
color: #666;
margin-left: 10px;
}
#reg_header .reg_h_center .reg_h_right span {
float: right;
font-size: 13px;
color: #666;
}
#reg_content {
width: 1200px;
/*background: red;*/
height: 700px;
margin: 20px auto;
display: flex;
}
#reg_content .reg_content_left {
flex: 2;
/*background: blue;*/
}
#reg_content .reg_content_left form {
margin: 50px auto;
margin-left: 50px;
display: block;
/*margin 0 auto 才居中显示*/
/*background: #666666;*/
width: 450px;
}
#reg_content .reg_content_left form span {
margin-top: 10px;
margin-right: 10px;
float: right;
width: 150px;
text-align: center;
height: 35px;
display: block;
/*background: yellow;*/
}
.error {
color: red;
vertical-align: middle;
/* background: green;*/
}
#reg_content .reg_content_left form input {
border: none;
}
#reg_content .reg_content_left form input::-webkit-input-placeholder {
color: #ccc;
font-size: 14px;
}
#reg_content .reg_content_left form img {
width: 108px;
height: 40px;
position: absolute;
/*子绝父相*/
top: 12px;
right: 10px;
}
#reg_content .reg_content_left form div {
width: 439px;
height: 64px;
border: 1px solid #CCCCCC;
margin-bottom: 20px;
line-height: 64px;
padding-left: 20px;
font-size: 16px;
color: #666;
position: relative;
}
#reg_content .reg_content_left form div:last-child {
border: none;
display: flex;
padding: 0;
}
#reg_content .reg_content_left form div:last-child input {
background: red;
width: 100px;
height: 64px;
flex: 1;
text-align: center;
color: white;
font-size: 16px;
font-weight: bold;
}
#reg_content .reg_content_left form div:last-child input:hover {
cursor: pointer;
}
#reg_content .reg_content_left form div:last-child input:first-child {
margin-right: 100px;
}
#reg_content .reg_content_right {
flex: 1;
/*background: green; */
border-left: 1px solid #CCCCCC;
padding: 50px 0 0 50px;
}
.input-val {
width: 200px;
height: 32px;
border: 1px solid #ddd;
box-sizing: border-box;
}
#canvas {
vertical-align: middle;
box-sizing: border-box;
border: 1px solid #ddd;
cursor: pointer;
}
</style>
js 相关
<script type="text/javascript" src="jquery.min.js" ></script>
<script>
/*分析：
* 1.给表单绑定onsubmit()事件，监听器中判断每一个方法的校验结果，如果都为True,则监听器方法返回true
* 否则有一个为false,则监听器事件返回false
*
* 2.定义一些方法分别校验各个表单项
* 3.给表单绑定onblur事件
*
* */
window.οnlοad=function(){
// 页面加载完毕之后 1.给表单绑定onsubmit()事件
document.getElementById("form").onsubmit = function(){
// 调用用户名校验方法 checkUsername()
// 调用密码校验方法 checkPassword()
// 调用手机号校验方法 checkPhonenum()
// 调用验证码校验方法 checkCode()
return checkUsername() && checkPassword()&& checkRepassword() && checkPhonenum();
}
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
document.getElementById("repassword").οnblur=checkRepassword;
document.getElementById("phonenum").οnblur=checkPhonenum;
}
// 校验用户名
function checkUsername(){
// 1.获取用户名的值
var username=document.getElementById("username").value;
// 2.定义正则表达式
var reg_username=/^\w{6,12}$/;
// 3.判断值是否符合表达式的规则
var flag=reg_username.test(username);
var s_username = document.getElementById("s_username");
if(flag){
s_username.innerHTML = "<img height='25' width='35' src='gou.png'>";
}else{
s_username.innerHTML = "用户名格式有误";
}
return flag;
}
// 校验密码
function checkPassword(){
var password=document.getElementById("password").value;
var reg_password=/^[a-zA-Z]\w{5,17}$/;
var flag=reg_password.test(password);
var s_password = document.getElementById("s_password");
if(flag){
s_password.innerHTML = "<img height='25' width='35' src='gou.png'>"
}else{
s_password.innerHTML = "密码格式错误";
}
return flag;
}
// 再次校验密码
function checkRepassword(){
var password1=document.getElementById("password").value;
var repassword=document.getElementById("repassword").value;
var flag=false;
var s_repassword = document.getElementById("s_repassword");
if(password1==repassword){
flag=true;
s_repassword.innerHTML = "<img height='25' width='35' src='gou.png'>"
}else{
// 提示信息
s_repassword.innerHTML = "两次输入密码不一致";
}
return flag;
}
// 校验电话号码
function checkPhonenum(){
var phonenum=document.getElementById("phonenum").value;
var reg_phone=/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
var flag=reg_phone.test(phonenum);
var s_phone = document.getElementById("s_phonenum");
if(flag){
s_phone.innerHTML = "<img height='25' width='35' src='gou.png'>"
}else{
// 提示信息
s_phone.innerHTML = "电话号码格式错误";
}
return flag;
}
$(function(){
var show_num = [];
draw(show_num);
$("#canvas").on('click',function(){
draw(show_num);
})
$("#btn").on('click',function(){
var val = $(".input-val").val().toLowerCase();
var num = show_num.join("");
if(val==''){
alert('请输入验证码！');
}else if(val == num){
alert('注册成功！');
$(".input-val").val('');
// draw(show_num);
}else{
alert('验证码错误！请重新输入！');
$(".input-val").val('');
// draw(show_num);
}
})
})
//生成并渲染出验证码图形
function draw(show_num) {
var canvas_width=$('#canvas').width();
var canvas_height=$('#canvas').height();
var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
canvas.width = canvas_width;
canvas.height = canvas_height;
var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
var aCode = sCode.split(",");
var aLength = aCode.length;//获取到数组的长度
for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
// var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
var deg = Math.random() - 0.5; //产生一个随机弧度
var txt = aCode[j];//得到随机的一个内容
show_num[i] = txt.toLowerCase();
var x = 10 + i * 20;//文字在canvas上的x坐标
var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
context.font = "bold 23px 微软雅黑";
context.translate(x, y);
context.rotate(deg);
context.fillStyle = randomColor();
context.fillText(txt, 0, 0);
context.rotate(-deg);
context.translate(-x, -y);
}
for (var i = 0; i <= 5; i++) { //验证码上显示线条
context.strokeStyle = randomColor();
context.beginPath();
context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
context.stroke();
}
for (var i = 0; i <= 30; i++) { //验证码上显示小点
context.strokeStyle = randomColor();
context.beginPath();
var x = Math.random() * canvas_width;
var y = Math.random() * canvas_height;
context.moveTo(x, y);
context.lineTo(x + 1, y + 1);
context.stroke();
}
}
//得到随机的颜色值
function randomColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
</script>
完整文件
