0213-網頁前端設計與開發運用培訓班
===
###### tags: `德鍵`
---
一、前台驗證
1. reg_form.tpl
```htmlmixed=
<!-- 表單驗證 -->
<style>
.error{
color: red;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
<!-- 調用函式 -->
<script>
$(function(){
$("#myForm").validate({
submitHandler: function(form) {
form.submit();
},
rules: {
'uname' : {
required: true
},
'pass' : {
required: true
},
'chk_pass' : {
equalTo:"#pass"
},
'name' : {
required: true
},
'tel' : {
required: true
},
'email' : {
required: true,
email : true
}
},
messages: {
'uname' : {
required: "必填"
},
'pass' : {
required: "必填"
},
'chk_pass' : {
equalTo:"密碼不一致"
},
'name' : {
required : "必填"
},
'tel' : {
required: "必填"
},
'email' : {
required: "必填",
email : "email格式不正確"
}
}
});
});
</script>
```
上課範例：
---
```htmlmixed=
<!-- 表單驗證 -->
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
<!-- 調用方法 -->
<style>
.error{
color:red;
}
</style>
<script>
// `uname`, `pass`, `name`, `tel`, `email`,
$(function(){
});
$(function(){
$("#myForm").validate({
submitHandler: function(form) {
form.submit();
},
rules: {
'uname' : {
required: true
}
},
messages: {
'uname' : {
required: "必填"
}
}
});
});
</script>
```
二、 利用SESSION製作一個「轉向頁」
1. sweetalert2： https://sweetalert2.github.io/
2. 首先製作單一頁面，測試無誤，再移植
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>sweetalert2</title>
</head>
<body>
<h1>sweetalert2</h1>
<!-- sweetalert2 -->
<link rel="stylesheet" href="./sweetalert2.min.css">
<script src="./sweetalert2.min.js"></script>
<script>
window.onload = function(){
Swal.fire({
//position: 'top-end',
icon: 'success',
title: '轉頁訊息',
showConfirmButton: false,
timer: 3000
})
}
</script>
</body>
</html>
```
user.tpl 接在body後面
---
```htmlmixed=
<{* sweetalert2 *}>
<!-- sweetalert2 -->
<link rel="stylesheet" href="<{$xoAppUrl}>class/sweetalert2/sweetalert2.min.css">
<script src="<{$xoAppUrl}>class/sweetalert2/sweetalert2.min.js"></script>
<script>
window.onload = function(){
Swal.fire({
//position: 'top-end',
icon: 'success',
title: '轉頁訊息',
showConfirmButton: false,
timer: 3000
})
}
</script>
```
3. web11/templates/user.tpl 、theme.tpl
```htmlmixed=
<{* 轉向 *}>
<{include file="tpl/redirect.tpl"}>
```
4. web11/templates/tpl/redirect.tpl
```htmlmixed=
<!--
https://sweetalert2.github.io/
-->
<script src="<{$xoAppUrl}>class/sweetalert2/sweetalert2.min.js"></script>
<link rel="stylesheet" href="<{$xoAppUrl}>class/sweetalert2/sweetalert2.min.css">
<script>
window.onload = function(){
Swal.fire({
icon: 'success',
title: "<{$message}>",
showConfirmButton: false,
timer: <{$time}>
})
}
</script>
```
5. user.php => 建立一個 函式
```php
/*############################################
轉向函數
############################################*/
function redirect_header($url = "index.php", $message = '訊息', $time = 3000) {
header("location:{$url}");//注意前面不可以有輸出
}
```
調用
```php
//(轉向頁面,訊息,時間)
redirect_header("user.php", '訊息', 3000);
```
如果有報錯，去function.php 註解「redirect_header」
6. function.php
```php
/*############################################
轉向函數
############################################*/
function redirect_header($url = "index.php", $message = '訊息', $time = 3000) {
$_SESSION['redirect'] = true;
$_SESSION['message'] = $message;
$_SESSION['time'] = $time;
header("location:{$url}");
exit;
}
```
7. head.php
```php
#轉向用
$_SESSION['redirect'] = isset($_SESSION['redirect']) ? $_SESSION['redirect'] : "";
$_SESSION['message'] = isset($_SESSION['message']) ? $_SESSION['message'] : "";
$_SESSION['time'] = isset($_SESSION['time']) ? $_SESSION['time'] : "";
$smarty->assign("redirect",$_SESSION['redirect']); //<{$redirect}>
$smarty->assign("message",$_SESSION['message']);
$smarty->assign("time",$_SESSION['time']);
$_SESSION['redirect'] = "";
$_SESSION['message'] = "";
$_SESSION['time'] = "";
```
8. user.tpl
```htmlmixed=
<{* sweetalert2 *}>
<{if $redirect}>
<!-- sweetalert2 -->
<link rel="stylesheet" href="<{$xoAppUrl}>class/sweetalert2/sweetalert2.min.css">
<script src="<{$xoAppUrl}>class/sweetalert2/sweetalert2.min.js"></script>
<script>
window.onload = function(){
Swal.fire({
//position: 'top-end',
icon: 'success',
title: "<{$message}>",
showConfirmButton: false,
timer: <{$time}>
})
}
</script>
<{/if}>
```
9. 調用函數
```php
redirect_header("index.php", "註冊成功");
```
7.
三、 後台驗證
Sign in with Wallet
Connect another wallet