24.4.1 前端设计与实现
04-13Ctrl+D 收藏本站
预约订单开发主要分为两个部分，一是用户填写的表单，二是信息的确认页面。
用户填写表单的页面是第一个Web页面，在该Web页面上方可以放置公司的Logo或者宣传图片，相关代码实现如下。
1 <p>
2 <p>
3 <p >
4 <ul><img src="img/logo.png"
>
5 </ul>
6 </p>
7 </p>
8 <p></p>
9 </p>
下方放置页面功能介绍及订单填写表单，其中页面介绍相关代码如下。
1 <ul> 2 <li> 3 <h2>预约口腔医生</h2> 4 <p> 5 长沙市XX口腔竭诚为您服务<br/> 6 联系电话：0731-7654321</p> 7 </li> 8 </ul>
最后需要让用户填写表单，并将表单信息通过POST提交给submit.php文件。其相关代码实现如下。
1 <form method="post" action="submit.php" onsubmit="return tgSubmit">
2 <ul>
3 <li><span>请填写以下信息</span></li>
4 <li>
5 <table border="0" cellspacing="0" cellpadding="0">
6 <tbody>
7 <tr>
8 <th>姓名</th>
9 <td><input type="text" placeholder="请输入姓名"
name="name" >
10 </td>
11 </tr>
12 </tbody>
13 </table>
14 </li>
15 <li>
16 <table border="0" cellspacing="0" cellpadding="0">
17 <tbody>
18 <tr>
19 <th>性别</th>
20 <td><select name="sex" class=
"dropdown-select"><option selected="">请选择性别</option>
<option >男</option><option >女</option></select>
21 </td>
22 </tr>
23 </tbody>
24 </table>
25 </li>
26 <li>
27 <table border="0" cellspacing="0" cellpadding="0">
28 <tbody>
29 <tr>
30 <th>年龄</th>
31 <td><input type="text" placeholder="请输入年龄"
name="age" >
32 </td>
33 </tr>
34 </tbody>
35 </table>
36 </li>
37 <li>
38 <table border="0" cellspacing="0" cellpadding="0">
39 <tbody>
40 <tr>
41 <th>手机</th>
42 <td><input type="text" placeholder="请输入手机"
name="mobile" >
43 </td>
44 </tr>
45 </tbody>
46 </table>
47 </li>
48 <li>
49 <table border="0" cellspacing="0" cellpadding="0">
50 <tbody>
51 <tr>
52 <th>预约日期</th>
53 <td>
54 <select name="bookdate"
>
55 <option selected="">请选择预约日期</option>
56 <?php
57 for ($i = 1; $i <= 6; $i++) {
58 $offset = strtotime("+".($i-1)." day");
59 $bDate = date("m月d日",$offset);
60 $optionString .= '<option >'.$bDate.'</option>';
61 }
62 echo $optionString;
63 ?>
64 </select>
65 </td>
66 </tr>
67 </tbody>
68 </table>
69 </li>
70 <li>
71 <table border="0" cellspacing="0" cellpadding="0">
72 <tbody>
73 <tr>
74 <th>预约专家</th>
75 <td><select name="bookexpert"
><option selected="">请选择预约专家
</option><option >陈艳</option><option >
杨广胜</option><option >周平</option></select>
76 </td>
77 </tr>
78 </tbody>
79 </table>
80 </li>
81 </ul>
82
83 <p >
84 <input type="hidden" name="openid" >
85 <input type="submit"
>
86 </p>
87 </form>
在上述代码中，定义了一个form表单，设置了“姓名”“性别”“年龄”“手机”“预约日期”“预约专家”等选项。其中，“姓名”“年龄”“手机”由用户自己填写，“性别”“预约专家”由程序指定选择列表供用户选择，“预约日期”则由PHP程序生成未来6天的日期。在提交的表单信息中，还将用户的微信ID隐藏起来一起提交（第84行）。
对这些表单选项还需要使用JavaScript来校验用户是否正确输入，并在错误输入时显示提示语，其相关代码如下。
1 <script>
2 function showTip(tipTxt) {
3 var p = document.createElement('p');
4 p.innerHTML = '<p><p>' + tipTxt + '</p></p>';
5 var tipNode = p.firstChild;
6 $("#wrap").after(tipNode);
7 setTimeout(function {
8 $(tipNode).remove;
9 }, 1500);
10 }
11 function tgSubmit{
12 var name=$("#name").val;
13 if($.trim(name) == ""){
14 showTip('请输入姓名')
15 return false;
16 }
17 var sex=$("#sex").val;
18 var age=$("#age").val;
19 var patrn = /^[0-9]{1,2}$/;
20 if (!patrn.exec($.trim(age))) {
21 showTip('请输入年龄')
22 return false;
23 }
24 var mobile=$("#mobile").val;
25 if($.trim(mobile) == ""){
26 showTip('请正确填写手机号码')
27 return false;
28 }
29 var patrn = /^13[0-9]{9}$|^15[0-9]{9}$|^18[0-9]{9}$/;
30 if (!patrn.exec($.trim(mobile))) {
31 showTip('请正确填写手机号码')
32 return false;
33 }
34 var bookdate=$("#bookdate").val;
35 if($.trim(bookdate) == ""){
36 showTip('请输入预约日期')
37 return false;
38 }
39 var bookexpert=$("#bookexpert").val;
40 if($.trim(bookexpert) == ""){
41 showTip('请输入预约专家')
42 return false;
43 }
44 return true;
45 }
46 </script>
上述页面的实现效果如图24-9所示。
图24-9 订单预约页面