Vue 高效清空表單，一鍵清空表單

段時間在租個后臺的項目，有兩處需要一鍵清空表單數(shù)據(jù)

一、表單篩選后，需要可以一鍵清空或者恢復(fù)初始化篩選條件

初始化查詢數(shù)據(jù)：

1.在created鉤子深拷貝了一份數(shù)據(jù)模板：

這個時候this.defaultUserFormSearch已經(jīng)是this.userFormSearch沒改變之前的一個備份

2.在清空按鈕事件觸發(fā)后，再將備份的數(shù)據(jù)this.defaultUserFormSearch賦給this.userFormSearch

注意：這里一定還要是深拷貝，

this.userFormSearch=this.defaultUserFormSearch;(這種做法是錯誤的); 如果清空的時候不深拷貝備份的數(shù)據(jù)this.defaultUserFormSearch，那么this.defaultUserFormSearch將會和this.userFormSearch關(guān)聯(lián)上，

后面清空之后修改了this.userFormSearch會牽扯到this.defaultUserFormSearch也被修改，再去清空就會有問題

我們每個頁面查詢條件都很多，這里只是拿了最少的一個舉例子，如果查詢條件更多，我們清空的當然也可以采用下面的方式，

這種方式也可以，只不過當里面項目比較多的時候，我們也要寫好多代碼

或者我們直接把this.userFormSearch={}，我們status如果有默認值，那么這種暴力清除的方式也是不可以用的

二、我們編輯彈窗，取消后或者關(guān)閉后，同樣可以采用這種辦法來清空哦。

歡迎看到的同學(xué)或者前輩吐槽，或者告訴我還有更好的辦法~

轉(zhuǎn)自：麻麻怪大俠（https://www.cnblogs.com/mamaguai/p/8143391.html）

果有人說開發(fā)Web系統(tǒng)，從來沒用到過HTML標簽中的表單標簽的話，那他或她，肯定不是在逗你玩，而是他們開發(fā)的是靜態(tài)頁面。如果是動態(tài)內(nèi)容的話，表單標簽是必須用到的，畢竟它們是標簽界的杠把子，表單是一個包含表單元素的區(qū)域。

表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。

6.1 登錄窗口

細細想來，現(xiàn)在上什么平臺，好像都要登錄之后，才可以完成相關(guān)的業(yè)務(wù)操作。上電商平臺購物，登錄之后才可以付款，付款了才有貨收；上自媒體平臺，只有登錄之后，才可以發(fā)文章，發(fā)視頻。既然登錄這么常用，那我就HTML實現(xiàn)一下。

<form>標簽用于創(chuàng)建供用戶輸入的HTML表單，它的action屬性綁定后端的業(yè)務(wù)處理方法(URL);method方法可選get或post。

<input>標簽規(guī)定了用戶可以在其中輸入數(shù)據(jù)的輸入字段，type指定輸入類型，text為文本，password為密碼，可指定的類型還有好多種。name屬性指定input的名稱，而你輸入的值，會被賦給value屬性。

<button>按鈕標簽，常用的類型的有提交用戶輸入內(nèi)容的submit，有重置清空表單的reset。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登錄之后更美</title>
</head>
<body>
<form action="login">
    賬號：<input type="text" name="account"/><br/>
    密碼：<input type="password" name="pwd"/><br/><br/>
    <button type="submit">
        登錄
    </button>
    <button type="reset">
        重置
    </button>
</form>
</body>
</html>

輸出結(jié)果

6.2 個人信息

好多平臺，為了給你推薦個性化的需求，會有一個頁面讓你填寫個人信息，內(nèi)容常常會有你的愛好、性別、生日什么的。如果你不填寫，不友好的平臺就不給你跳過。如果遇到這種平臺，我一般就直接跳過，不再用，畢竟有些信息是個人隱私，比如老陳搞了10多年IT。

radio單選按鈕，屬性name的值相同時，多選一，否則都可以選擇；

checkbox復(fù)習(xí)框：可以勾選多個。常用在興趣等多個類型選擇中；

select下拉列表框：在多個預(yù)設(shè)選項中，選擇其中一個；

textarea多行輸入框：輸入的內(nèi)容較多時，就用它。rows屬性指定行數(shù)，cols指定列數(shù)。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>亮出你的美</title>
</head>
<body>
個人信息登記 <br/> <br/>
<form action="infoSubmit">
    姓名：<input type="text" name="name"/><br/>
    性別：<input type="radio" name="gender" value="male"/>男
    <input type="radio" name="gender" value="female"/>女<br/>
    興趣：<input type="checkbox" name="p" value="p"/>編程
    <input type="checkbox" name="k" value="k"/>看書
    <input type="checkbox" name="c" value="c"/>看電影
    <input type="checkbox" name="l" value="l"/>看美女
    <br/>
    愛好：
    <select name="love">
        <option value="x">下象棋</option>
        <option value="j">下軍旗</option>
        <option value="t">下跳棋</option>
        <option value="w">下圍棋</option>
    </select>
    <br/><br/>
    <textarea rows="10" cols="35">個人簡介</textarea><br/><br/>
    <button type="submit">
        提交
    </button>
    <button type="reset">
        重置
    </button>
</form>
</body>
</html>

輸出結(jié)果

好了，有關(guān)html表單的內(nèi)容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點贊，就是對老陳繼續(xù)創(chuàng)作和分享最大的鼓勵。

一個當了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗。想學(xué)編程的朋友，可關(guān)注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒錯的。

#前端##程序員##HTML5##表單##數(shù)據(jù)#

HTML標簽相關(guān)的字符串格式化

string nl2br ( string $string )

nl2br() 就是將\n 替換成 <br> //javascript對\n才能夠執(zhí)行換行,對</br>是不能執(zhí)行換行

htmlspecialchars() 把一些預(yù)定義的字符轉(zhuǎn)換為 HTML 實體。

string htmlspecialchars(string,quotestyle,[character-set])

轉(zhuǎn)換以下字符及對應(yīng)的實體

& （和號） 成為 &
" （雙引號） 成為 "
' （單引號） 成為 '
< （小于） 成為 <
> （大于） 成為 >

第二個參數(shù): ENT_COMPAT 只轉(zhuǎn)換雙引號, 保留單引號, 為默認值 compat: 兼容性

ENT_QUOTES 同時轉(zhuǎn)換兩種引號 quotes: 引號

ENT_NOQUOTES 不對引號進行轉(zhuǎn)換

<html>
<body>
<?php
$str="John & \" 'Adams'";
echo htmlspecialchars($str, ENT_COMPAT);
echo "<br />";
echo htmlspecialchars($str, ENT_QUOTES);
echo "<br />";
echo htmlspecialchars($str, ENT_NOQUOTES);
?>
</body>
</html>

輸出結(jié)果:John & " 'Adams'

John & " 'Adams'

htmlentities() 可以將所有的非ASCII碼字符轉(zhuǎn)換為對應(yīng)的實體代碼;除字母、數(shù)字、\外, 漢字和鍵盤上其他字符都轉(zhuǎn)換

<?php
$str="A 'quote' \" is <b>bold</b>" ;
echo htmlentities ( $str ); // 輸出后源代碼: A 'quote' is <b>bold</b>
echo htmlentities ( $str , ENT_QUOTES ); // 輸出后源代碼: A 'quote' is <b>bold</b>
?>

返回的結(jié)果:A 'quote' "is <b>bold</b>

A 'quote' "is <b>bold</b>

注意: htmlspecialchars()和htmlentities作用直接輸出HTML腳本

htmlspecialchars()和htmlentities()函數(shù)對于轉(zhuǎn)義字符"\"處理,不會轉(zhuǎn)義實體代碼,要么當轉(zhuǎn)義字符對待,要么原樣輸出;

PHP中htmlentities和htmlspecialchars的區(qū)別

這兩個函數(shù)的功能都是轉(zhuǎn)換字符為HTML字符編碼, 特別是url和代碼字符串。防止字符標記被瀏覽器執(zhí)行。

使用中文時沒什么區(qū)別, 但htmlentities會格式化中文字符使得中文輸入是亂碼。

htmlentities轉(zhuǎn)換所有的html標記, htmlspecialchars只格式化& ' " < 和 > 這幾個特殊符號

addslashes() 在指定的預(yù)定義字符前添加反斜杠。

這些預(yù)定義字符是：單引號 (') 雙引號 (") 反斜杠 (\) NULL字符(\x00)

提示：該函數(shù)可用于為存儲在數(shù)據(jù)庫中的字符串以及數(shù)據(jù)庫查詢語句準備合適的字符串。

注釋：默認情況下，PHP 指令 magic_quotes_gpc 為 on，對所有的 GET、POST 和 COOKIE數(shù)據(jù)自動運行 addslashes()。

不要對已經(jīng)被magic_quotes_gpc轉(zhuǎn)義過的字符串使用 addslashes()，因為這樣會導(dǎo)致雙層轉(zhuǎn)義。

遇到這種情況時可以使用函數(shù) get_magic_quotes_gpc() 進行檢測。(如:$c=(!get_magic_quotes_gpc())?addslashes($c):$c;)

在本例中，我們要向字符串中的預(yù)定義字符添加反斜杠：

<?php
$str="Who's John Adams?";
echo $str . " This is not safe in a database query.<br />";
echo addslashes($str) . " This is safe in a database query.";
?>

輸出：

Who's John Adams? This is not safe in a database query.

Who\'s John Adams? This is safe in a database query.

<?php
header("Content-type:text/html; charset=utf-8");
$str="wo are \x0a studying \x00 php";
echo $str;
echo "<br>";
echo addslashes($str);
?>

輸出:

wo are studying php

wo are studying >wo are studying \0 php< php

stripslashes() 刪除反斜線（"\"）

在提交的表單數(shù)據(jù)中 ' " \ 等字符前被自動加上一個\ ,這是配置文件php.ini中選項magic_quotes_gpc在起作用，

默認是打開的，如果不處理則將數(shù)據(jù)保存到數(shù)據(jù)庫時，有可能會被數(shù)據(jù)庫誤當成控制符號而引起錯誤。

通常htmlspecialchars()和stripslashes()函數(shù)復(fù)合的方式，聯(lián)合處理表單中的提交的數(shù)據(jù)htmlspecialchars(stripslashes())

strip_tags()

string strip_tags ( string $str [, string $allowable_tags ] )

剝?nèi)?HTML、XML 以及 PHP 的標簽。

<?php
echo strip_tags("Hello <b><i>world!</i></b>","<b>");
?>

輸出結(jié)果:Hello world!

實例:

<?php
$str="<b>webserver;</b> & \ 'Linux' & Apache";
echo "$str"; //直接輸出
echo "<br/>";
echo htmlspecialchars($str,ENT_COMPAT); //只轉(zhuǎn)換雙引號,為默認參數(shù)
echo "<br />";
echo htmlspecialchars($str,ENT_NOQUOTES); //不對引號進行轉(zhuǎn)換
echo "<br />";
echo htmlspecialchars($str,ENT_QUOTES); //同時轉(zhuǎn)換單引號和雙引號
echo "<br />";
echo htmlentities($str); //將所有的非ASCII碼字符轉(zhuǎn)換為對應(yīng)的實體代碼
echo "<br />";
echo addslashes($str); //將" ' \ 字符前添加反斜線
echo "<br />";
echo stripslashes($str); //刪除反斜線
echo "<br />";
echo strip_tags($str); //刪除<html>標記
?>

輸出結(jié)果:

webserver; & \ 'Linux' & Apache

在線咨詢

上一篇：亞馬遜HTML標記即將失效
下一篇：HTML基礎(chǔ)篇筆記

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Vue 高效清空表單，一鍵清空表單

6.1 登錄窗口

6.2 個人信息

您的項目需求