使用了bootstrap，可以進行表單驗證。
HTML頁面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>添加學生信息</title>
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./bootstrapvalidator-master/dist/css/bootstrapValidator.min.css">
<link rel="stylesheet" href="./bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="./bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./bootstrapvalidator-master/dist/js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="./bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="./bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" name="form1" action="reg.php" method="post">
<div class="form-group">
<label for="stuid" class="col-sm-2 control-label">學號*</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="stuid" name="stuid" placeholder="請輸入學號">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">姓名*</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="請輸入姓名">
</div>
</div>
<div class="form-group">
<label for="sex" class="col-sm-2 control-label">性別*</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="sex" id="inlineRadio1" value="男">男
</label>
<label class="radio-inline">
<input type="radio" name="sex" id="inlineRadio2" value="女">女
</label>
<!--<input type="radio" name="sex" value="男">男-->
<!--<input type="text" class="form-control" id="sex" name="sex" placeholder="請輸入性別">-->
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">手機號</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone" name="phone" placeholder="請輸入手機號碼">
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-sm-2 control-label">出生日期</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="birthday" name="birthday" placeholder="請輸入出生日期">
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-2 control-label">家庭住址</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="address" name="address" placeholder="請輸入家庭住址">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary btn-lg btn-block">添加</button>
</div>
</div>
</form>
</div>
</body>
</html>
<script type="text/javascript">
$("#birthday").datetimepicker({
format: "yyyy-mm-dd",
minView: 'month',
autoclose: true,
language: 'zh-CN'
})
$(function () {
$('form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
stuid: {
message: '請輸入學號',
validators: {
notEmpty: {
message: '學號不能爲空'
},
stringLength: {
min: 10,
max: 10,
message: '學號必須爲10位'
},
numeric: {
message: '學號必須數字'
}
}
},
name: {
validators: {
notEmpty: {
message: '姓名不能爲空'
},
stringLength: {
max: 10,
message: '姓名最大不能超過10個字符'
},
regexp: {
regexp: /[\u4e00-\u9fa5]/,
message: '姓名必須爲漢字'
}
}
},
sex: {
validators: {
notEmpty: {
message: '性別不能爲空'
},
regexp: {
regexp: /^(男|女)$/,
message: '性別必須爲“男”或“女”'
}
}
},
phone: {
validators: {
stringLength: {
min: 11,
max: 11,
message: '手機號必須爲11位'
},
numeric: {
message: '手機號必須爲數字'
}
}
}
}
});
});
</script>
PHP代碼：
<?php
include 'myFounction.php';
if (empty($_POST)) {
show_error('非法訪問','register.html',5);
}
//獲取表單信息
$stuid = $_POST['stuid'];
$name = $_POST['name'];
$sex = $_POST['sex'];
$phone = $_POST['phone'];
$birthday = $_POST['birthday'];
$address = $_POST['address'];
$stuid=trim($stuid);
$name=trim($name);
if (empty($stuid) || empty($name)){
die();
show_error('學號或姓名不能爲空','register.html',5);
}
$stuid = htmlspecialchars(addslashes($stuid));
$name = htmlspecialchars(addslashes($name));
$sex = htmlspecialchars(addslashes($sex));
$phone = htmlspecialchars(addslashes($phone));
$birthday = htmlspecialchars(addslashes($birthday));
$address = htmlspecialchars(addslashes($address));
if (empty($birthday)){
$birthday = 'null';
}else{
$birthday = sprintf("'%s'",$birthday);
}
$sql1="select * from student where stuid='$stuid'";
$sql2="insert into student(id,stuid,name,sex,phone,birthday,address) value (null,'$stuid','$name','$sex','$phone',$birthday,'$address')";
//連接mysql
$mysqli = @new mysqli("localhost","root","","myschool");
if ($mysqli->connect_errno){
die("數據庫連接失敗".$mysqli->connect_errno);
}
//設置編碼格式
$mysqli->set_charset('utf8');
//執行select查看是否已經存在
$res1 = $mysqli->query($sql1);
//var_dump($res1);
if ($res1->num_rows==1){
}
//執行insert sql
$res = $mysqli->query($sql2);
if ($res === false){
show_error("執行SQL語句出錯，請檢查<br>".$sql2,"register.html",5);
}
$n = $mysqli->affected_rows;
if ($n > 0){
show_success("添加成功！","register.html",5);
}
//關閉數據庫連接
$mysqli->close();
?>