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

段時(shí)間在租個(gè)后臺(tái)的項(xiàng)目，有兩處需要一鍵清空表單數(shù)據(jù)

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

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

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

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

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

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

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

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

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

這種方式也可以，只不過當(dāng)里面項(xiàng)目比較多的時(shí)候，我們也要寫好多代碼

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

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

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

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

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

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

6.1 登錄窗口

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登錄之后更美</title>
</head>
<body>
<form action="login">
    賬號(hào)：<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 個(gè)人信息

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>亮出你的美</title>
</head>
<body>
個(gè)人信息登記 <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">個(gè)人簡介</textarea><br/><br/>
    <button type="submit">
        提交
    </button>
    <button type="reset">
        重置
    </button>
</form>
</body>
</html>

輸出結(jié)果

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

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

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

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

string nl2br ( string $string )

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

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

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

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

& （和號(hào)） 成為 &
" （雙引號(hào)） 成為 "
' （單引號(hào)） 成為 '
< （小于） 成為 <
> （大于） 成為 >

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

ENT_QUOTES 同時(shí)轉(zhuǎn)換兩種引號(hào) quotes: 引號(hào)

ENT_NOQUOTES 不對(duì)引號(hào)進(jìn)行轉(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)換為對(duì)應(yīng)的實(shí)體代碼;除字母、數(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ù)對(duì)于轉(zhuǎn)義字符"\"處理,不會(huì)轉(zhuǎn)義實(shí)體代碼,要么當(dāng)轉(zhuǎn)義字符對(duì)待,要么原樣輸出;

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

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

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

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

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

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

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

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

不要對(duì)已經(jīng)被magic_quotes_gpc轉(zhuǎn)義過的字符串使用 addslashes()，因?yàn)檫@樣會(huì)導(dǎo)致雙層轉(zhuǎn)義。

遇到這種情況時(shí)可以使用函數(shù) get_magic_quotes_gpc() 進(jìn)行檢測。(如:$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ù)中 ' " \ 等字符前被自動(dòng)加上一個(gè)\ ,這是配置文件php.ini中選項(xiàng)magic_quotes_gpc在起作用，

默認(rèn)是打開的，如果不處理則將數(shù)據(jù)保存到數(shù)據(jù)庫時(shí)，有可能會(huì)被數(shù)據(jù)庫誤當(dāng)成控制符號(hào)而引起錯(cuò)誤。

通常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 的標(biāo)簽。

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

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

實(shí)例:

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

輸出結(jié)果:

webserver; & \ 'Linux' & Apache

在線咨詢

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

您的項(xiàng)目需求

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

整合營銷服務(wù)商

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

6.1 登錄窗口

6.2 個(gè)人信息

您的項(xiàng)目需求