本文完成于JavaScript和jQuery的学习时间，该作品纯手工渲染，未使用正则表达式。欢迎各位提出意见交流
效果图：
功能如下：
1、姓名和姓氏不能为空、不能含有数字
2、密码大于6位
3、两次密码相同
4、电子邮箱含有@.
源码如下：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>注册表单验证</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function() {
//判断名字不能有数字
$("input[name='name']").blur(function(event) {
var name = $(this).val();
var title=$(this).prev().find('a').text();
if (name=="") {
$(this).prev().find('.tiname').removeClass('green').addClass('red').text(title+"不能为空")
}else {
var arr=name.split("");
var sum=0;
for (var i = 0; i < arr.length; i++) {
if (arr[i]>=0) {
$(this).prev().find('.tiname').removeClass('green').addClass('red').text(title+"不能含有数字")
break;
}else {
sum+=1;
if (sum==arr.length) {
$(this).prev().find('.tiname').removeClass('red').addClass('green').text(title+"可用")
}
}
}
}
});
//密码
$("input[name='pwd']").blur(function(event) {
var pwd =$(this).val();
if (pwd.length < 6 ) {
$(".pwd").removeClass('green').addClass('red').text('密码至少6位')
}else {
$(".pwd").removeClass('red').addClass('green').text('密码可用')
}
});
//再次确认
$("input[name='pwd1']").blur(function(event) {
var pwd1 =$(this).val();
if (pwd1=="") {
$(".pwd1").removeClass('green').addClass('red').text('密码不一致')
}else {
if (pwd1 !== $("input[name='pwd']").val()) {
$(".pwd1").removeClass('green').addClass('red').text('密码不一致')
}else {
$(".pwd1").removeClass('red').addClass('green').text('密码可用')
}
}
});
//验证邮箱
$("input[name='email']").blur(function(event) {
var email = $("input[name='email']").val();
if (email.length == 0) {
//email==""
$("#email").removeClass('green').addClass('red').html("不能为空");
} else {
//email.indexOf('@')!=-1 && email.indexOf('.')!=-1
if (email.indexOf('@')!=-1 && email.indexOf('.')!=-1) {
console.log("true");
$("#email").removeClass('red').addClass('green').html("email可以使用");
} else {
console.log("false");
$("#email").removeClass('green').addClass('red').html("email格式错误");
}
}
});
})
</script>
<style media="screen">
form{
background-color: #000;
opacity: 0.4;
padding: 40px;
border-radius: 5px;
width: 400px;
margin: 0 auto;
}
div{
display: block;
width: 175px;
overflow: hidden;
}
label {
display: inline-block;
float: right;
height: auto;
line-height: 12px;
text-align: left;
width: 100%;
font-size: 14px;
font-weight: bold;
text-shadow: 1px 1px 1px #4e6877;
margin-top: 16px;
margin-bottom: 16px;
text-decoration: none;
}
span{
text-align: right;
display: inline-block;
float: right;
font-weight: normal;
text-shadow: none;
}
a{
text-decoration: none;
color: #fff;
}
.red{
color:red
}
.green{
color: green
}
h2{
color: #fff;
margin: 0 auto;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<form class="register" action="index.html" method="post">
<h2 >十点十八分注册页面</h2><hr>
<div class="name">
<label for=""><a href="#">名字</a> <span class="tiname"></span></label>
<input type="text" name="name" value="">
</div>
<div class="xing">
<label for=""><a href="#">姓氏</a><span class="tiname"></span></label>
<input type="text" name="name" value="">
</div>
<div class="loginname">
<label for=""><a href="#">登录名</a></label>
<input type="text" name="" value="">
</div>
<div class="loginpwd">
<label for=""><a href="#">密码</a><span class="pwd"></span></label>
<input type="password" name="pwd" value="">
</div>
<div class="pwdagain">
<label for=""><a href="#">再次确认</a><span class="pwd1"></span></label>
<input type="password" name="pwd1" value="">
</div>
<div class="em">
<label for=""><a href="#">电子邮箱</a><span id="email"></span></label>
<input type="email" name="email" value="">
</div>
</form>
</body>
</html>