代码展示：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>注册页面</title>
<link href="./css/style.css" rel="stylesheet" type="text/css">
</head>
<body class="body">
<div class="warp">
<form action="" id="myform">
<div class="form" id="form" name="myform" action="#" method="get">
<div class="form-title">
<span>注册账号</span>
</div>
<div class="form-main">
<div class="form-list">
<span>昵称</span>
<div class="form-text">
<input type="text" id="user" name="user" /><span style="left: 450px; color: red; width: 100px; height: 20px;"></span>
</div>
</div>
<div class="form-list">
<span>邮箱</span>
<div class="form-text">
<input type="text" id="email"><span style="left: 450px; color: red; width: 100px; height: 20px;"></span>
</div>
</div>
<div class="form-list">
<span>密码</span>
<div class="form-text">
<input type="password" id="password" name="password" /><span style="left: 450px; color: red; width: 100px; height: 20px;"></span>
</div>
</div>
<div class="form-list">
<span>再次密码</span>
<div class="form-text">
<input type="password" id="password1" name="password1" /><span style="left: 450px; color: red; width: 100px; height: 20px;"></span>
</div>
</div>
<div class="form-list gender">
<span>性别</span>
<div class="form-text">
<label><input type="radio" value="男" name="gender" checked> 男</label>
<label><input type="radio" value="女" name="gender"> 女</label>
</div>
</div>
<div class="form-list">
<span>生日</span>
<div class="form-text">
<select>
<option>2021年</option>
</select>
<select>
<option>1月</option>
</select>
<select>
<option>22日</option>
</select>
</div>
</div>
<div class="form-list">
<span>爱好</span>
<div>
<div class="ortherinput">
<input type="checkbox" />读书
<input type="checkbox" />编程
<input type="checkbox" />运动
</div>
</div>
</div>
<div class="form-list">
<span>头像</span>
<div>
<div class="ortherinput">
<input type="image" src="images/default.jpg" width="90px" height="80px" />
<input type="file" />
</div>
</div>
</div>
<div class="form-list">
<span>所在地</span>
<div class="form-text">
<select>
<option>河北省</option>
</select>
<select>
<option>秦皇岛市</option>
</select>
<select>
<option>北戴河区</option>
</select>
</div>
</div>
<div class="form-list">
<span>手机号</span>
<div class="form-text">
<input type="text" id="mobile"><span style="left: 450px; color: red; width: 100px; height: 20px;"></span>
</div>
</div>
<div class="prompt">
<p>可通过该手机号码快速找回密码</p>
<p> 中国大陆地区以外手机号码 <a href="javascript:void(0);" id="showcode"> 点击这里</a></p>
</div>
<div class="code">
<input type="text" /><span>获取短信验证码</span>
</div>
<div class="submit">
<input type="submit" id="submit" value="注册"/>
<input type="reset" id="reset" value="重置" />
</div>
<div class="deal">
<p><label><input type="checkbox" class="acc" id="deal" checked />我已阅读并同意相关服务条款和隐私政策</label> </p>
<span></span>
<div class="deal-list">
<a href="#">《账户规则》</a>
<a href="#">《服务协议》</a>
<a href="#">《隐私政策》</a>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
<script src="../js/jquery.js"></script>
<script>
$(function(){
function checkeUser(){
if ($("#user").val()=="") {
$("#user").next().html("用户名不能为空")
return false;
}else{
$("#user").next().html("")
return true;
}
}
$("#user").blur(function(){
checkeUser();
})
var mima=/^\w{6,15}$/;
function checkPwd(){
if($("#password").val()==""){
$("#password").next().html("密码不能为空！")
return false;
}else if(!mima.test($("#password").val())){
$("#password").next().html("密码少于六位!")
return false;
}else{
$("#password").next().html("")
return true;
}
}
$("#password").blur(function(){
checkPwd();
})
function checkPwd1(){
if($("#password1").val()==""){
$("#password1").next().html("密码不能为空！");
return false;
}else if($("#password1").val()!=$("#password").val()){
$("#password1").next().html("和原密码不同");
return false;
}else{
$("#password1").next().html("");
return true;
}
}
$("#password1").blur(function(){
checkPwd1();
})
var email=/^([A-z0-9]{6,18})(\w|\-)+@[A-z0-9]+\.([A-z]{2,3})$/;
function checkemail(){
if($("#email").val()==""){
$("#email").next().html("邮箱不能为空！");
return false;
}else if(!email.test($("#email").val())){
$("#email").next().html("邮箱格式错误！");
return false;
}else{
$("#email").next().html("");
return true;
}
}
$("#email").blur(function(){
checkemail();
})
var mobile=/^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
function checkmobile(){
if($("#mobile").val()==""){
$("#mobile").next().html("手机号不能为空")
return false;
}else if(!mobile.test($("#mobile").val())){
$("#mobile").next().html("手机号格式错误")
return false;
}else{
$("#mobile").next().html("")
return true;
}
}
$("#mobile").blur(function(){
checkmobile();
})
$("#myform").submit(function(){
if (!checkeUser()|!checkPwd()|!checkPwd1()|!checkemail()|!checkmobile()) {
return false
}
})
})
</script>
</html>展示内容效果：
素材：
当点击注册时你的内容填写只填写昵称会显示（效果图）：
如果都没填会显示点击注册时（效果图）：
结束语：
首先，恭喜大家已经看完整个（jquery实现注册表单验证）代码，一般而言，不管书籍也好，能够完整跟下来的就已经很不容易了。所以尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易。但大道至简，知易行难，需要大家之后不断练习，在此基础上加强知识的认知深度。虽然我尽量以通俗易通的形式，将内容体现出来，但水平毕竟有限，望大家海涵。
