Bootstrap Form
用Bootstrap去调form和table。
如图：
Form界面
若未填就提交：
提交后将提交的信息以一个table的形式呈现，例如：
其他错误也进行相应提示，除了常规的validation还有注意几点要求：
- Full Name要求有且只有一个空格
- 输入时按日月年，输出时按年月日
目录结构：
那个css文件有点小问题但是可以用。也可以根据需求自己写。
index.php:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<?php
function countspace($string) {
$num = 0;
for ($i = 0; $i < strlen($string); $i++) {
if ($string[$i] == " ") {
$num ++;
}
}
return $num;
}
function validateDate($date) {
$valid = false;
if (preg_match("/\d{2}\/\d{2}\/\d{4}/", $date)) {
// if we are here user has entered format of dd/mm/yyyy
$day = $month = $year = "";
// split up the pieces
list($day, $month, $year) = explode("/", $date);
$day = intval($day);
$month = intval($month);
$year = intval($year);
// now use PHP checkdate to verify it is a valid date
if (checkdate($month, $day, $year)) {
$valid = true;
}
}
return $valid;
}
function reformat($string) {
$day = $month = $year = $result = "";
if (preg_match("/\d{2}\/\d{2}\/\d{4}/", $string)) {
list($day, $month, $year) = explode("/", $string);
$result = $year . "-" . $month . "-" . $day;
}
return $result;
}
// end function
//main code
$full_name = '';
$email = '';
$mobile = '';
$dob = '';
$errors = []; //收集错误提示
include 'includes/header.php'; //方便调用css
if (isset($_POST['send'])) {//若输入不为空则依次看各项是否符合规范
$temp = str_replace(" ", "", $_POST['full_name']);
$full_name = $_POST['full_name'];
if (strlen($temp) == 0) {
$errors['full_name'] = 'Missing input';
} elseif (!ctype_alpha($temp)) {
$errors['full_name'] = 'Enter a valid Full Name';
} elseif (countspace($_POST['full_name']) != 1) {
$errors['full_name'] = 'The number of spaces is error';
}
if (isset($_POST['email'])) {//设定email的输入规范
$email = trim($_POST['email']);
if (strlen($email) == 0) {
$errors['email'] = "Missing input";
} else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors['email'] = "Enter a valid Email Address";
}
}
if (isset($_POST['mobile'])) {
$mobile = trim($_POST['mobile']);
if (strlen($mobile) == 0) {
$errors['mobile'] = "Missing input";
} elseif (strlen($mobile) < 10) {
$errors['mobile'] = "Mobile number must be 10 digits";
} else if (!ctype_digit($mobile)) {
$errors['mobile'] = "Enter a valid mobile number";
}
}
if (isset($_POST['dob'])) {
$temp = $_POST['dob'];
$dob = reformat($_POST['dob']);
if ($temp == "dd/mm/yyyy") {
$errors['dob'] = 'Missing input';
} elseif (!validateDate($temp)) {
$errors['dob'] = 'Date of birth is not valid';
}
}
if (count($errors) == 0) {
include 'includes/display_data.php'; //如果无错误就显示table
} else {
include 'includes/display_form.php'; //有不符合规范的就返回form并提示
}
} else {
include 'includes/display_form.php'; //必填项有空的就返回form并提示
}
include 'includes/footer.php'; //显示页脚
?>
</body>
</html>
includes/display_form.php:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6 box text-center">Registraion Form</div>
<div class="col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6 jumbotron">
<form class="form-horizontal" action="" method="post" novalidate>
<div class="form-group">
<label class="control-lable" for="fullname">
Full Name:
<span class="error" style="color:red">
<?= isset($errors['full_name']) ? $errors['full_name'] : "" ?>
</span>
</label>
<input class="form-control" type="text" name="full_name" maxlength="30" value="<?= $full_name ?>"/>
</div>
<br/>
<div class="form-group">
<label class="control-lable" for="email">
Email:
<span class="error" style="color:red">
<?= isset($errors['email']) ? $errors['email'] : "" ?>
</span>
</label>
<input class="form-control" type="text" name="email" value="<?= $email ?>"/>
</div>
<br/>
<div class="form-group">
<label>
Mobile:
<span class="error" style="color:red">
<?= isset($errors['mobile']) ? $errors['mobile'] : "" ?>
</span>
</label>
<input class="form-control" type="text" name="mobile" maxlength="10" value="<?= $mobile ?>"/>
</div>
<br/>
<div class="form-group">
<label>
Date of birth:
<span class="error" style="color:red">
<?= isset($errors['dob']) ? $errors['dob'] : "" ?>
</span>
</label>
<input class="form-control" type="date" name="dob" value="dd/mm/yyyy"/>
</div>
<br/>
<div class="form-grop">
<input type="submit" value="Submit" class="btn btn-primary btn-block" name="send"/>
</div>
</form>
</div>
<div class="col-sm-3"></div>
</div>
<?php
// put your code here
?>
</body>
</html>
includes/display_data.php:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<br><br>
<div class="container">
<div class="row">
<div class="col-md-3 text-center"></div>
<div class="col-md-6 box text-center">Registration Table</div>
<div class="col-md-3 text-center"></div>
</div>
<div class="row">
<div class="col-md-3 text-center"></div>
<div class="col-md-6 jumbotron text-center">
<table class="table table-striped table-hover">
<tr>
<th>Full Name</th>
<td><?= $full_name ?></td>
</tr>
<tr>
<th>Email</th>
<td><?= $email ?></td>
</tr>
<tr>
<th>Mobile</th>
<td><?= $mobile ?></td>
</tr>
<tr>
<th>Date of birth</th>
<td><?= $dob ?></td>
</tr>
</table>
</div>
<div class="col-md-3 text-center"></div>
</div>
</div>
<?php
// put your code here
?>
</body>
</html>
includes/header.php:
<!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>Bootstrap Theme</title>
<!--Bootstrap-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
</html>
includes/footer.php:
<html>
<body>
<footer>
</footer>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
原创文章 85
获赞 46
访问量 1万+