Collection
Collection
HTML部分：
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html>
<head>
<title>表单验证</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="ajax.js"></script>
<style>
.radio{float: left;padding-left: 20px;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- form: -->
<div class="col-lg-12">
<div class="page-header">
<h2>注册</h2>
</div>
<form method="post" class="form-horizontal" action="form.php">
<div class="form-group">
<label class="col-lg-3 control-label">用户名</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="username"/>
</div>
<div class="col-lg-4"> <p id="username"></p></div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">邮箱</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="email" />
</div>
<div class="col-lg-4"> <p id="email"></p></div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">密码</label>
<div class="col-lg-5">
<input type="password" class="form-control" name="password" />
</div>
<div class="col-lg-4"> <p id="password"></p></div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">性别</label>
<div class="col-lg-5">
<div class="radio">
<label>
<input type="radio" name="gender" value="0" /> 男
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="1" /> 女
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="2" /> 保密
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button class="btn btn-primary">提交</button>
</div>
</div>
</form>
</div>
<!-- :form -->
</div>
</div>
</body>
</html>php部分：
<?php
$username = isset($_POST['username']) ? trim($_POST['username']) : null;
if ($username !== null) {
if (mb_strwidth($username) < 4 || mb_strwidth($username) >9) {
echo ' <font color="#dc143c">请正确输入用户名</font></span>';
} else {
echo '<font color="#dc143c">用户名可以使用</font>';
}
}
$email = isset($_POST['email']) ? trim($_POST['email']) : null;
if ($email !== null) {
if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email)) {
echo ' <font color="#dc143c">邮箱格式不正确</font></span>';
} else {
echo '<font color="#dc143c">可以使用</font>';
}
}
$password = isset($_POST['password']) ? trim($_POST['password']) : null;
if ($password !== null) {
if (mb_strwidth($password) < 6 || mb_strwidth($password) >12) {
echo ' <font color="#dc143c">密码必须大于6位小于12位</font></span>';
} else {
echo '<font color="#dc143c">密码可用</font>';
}
}
?>AJAX部分
$(function(){
// 接收用户名
$("input[name='username']") .blur(function(){
$.ajax({
url:"form.php", //请求验证页面
type:"post", //请求方式 可换为post 注意验证页面接收方式
data:"username="+ $("input[name='username']").val(), //取得表文本框数据，作为提交数据 注意前面的 user 此处格式 key=value 其他方式请参考ajax手册
success: function(data)
{ //请求成功时执行操作
$("#username").html(data); //向ID为chk的元素内添加html代码
}
});
})
// 接收邮箱
$("input[name='email']") .blur(function(){
$.ajax({
url:"form.php", //请求验证页面
type:"post", //请求方式 可换为post 注意验证页面接收方式
data:"email="+ $("input[name='email']").val(), //取得表文本框数据，作为提交数据 注意前面的 user 此处格式 key=value 其他方式请参考ajax手册
success: function(data)
{ //请求成功时执行操作
$("#email").html(data); //向ID为chk的元素内添加html代码
}
});
})
// 接收密码
$("input[name='password']") .blur(function(){
$.ajax({
url:"form.php", //请求验证页面
type:"post", //请求方式 可换为post 注意验证页面接收方式
data:"password="+ $("input[name='password']").val(), //取得表文本框数据，作为提交数据 注意前面的 user 此处格式 key=value 其他方式请参考ajax手册
success: function(data)
{ //请求成功时执行操作
$("#password").html(data); //向ID为chk的元素内添加html代码
}
});
})
})