Vue 高效清空表单，一键清空表单

段时间在租个后台的项目，有两处需要一键清空表单数据

一、表单筛选后，需要可以一键清空或者恢复初始化筛选条件

初始化查询数据：

1.在created钩子深拷贝了一份数据模板：

这个时候this.defaultUserFormSearch已经是this.userFormSearch没改变之前的一个备份

2.在清空按钮事件触发后，再将备份的数据this.defaultUserFormSearch赋给this.userFormSearch

注意：这里一定还要是深拷贝，

this.userFormSearch=this.defaultUserFormSearch;(这种做法是错误的); 如果清空的时候不深拷贝备份的数据this.defaultUserFormSearch，那么this.defaultUserFormSearch将会和this.userFormSearch关联上，

后面清空之后修改了this.userFormSearch会牵扯到this.defaultUserFormSearch也被修改，再去清空就会有问题

我们每个页面查询条件都很多，这里只是拿了最少的一个举例子，如果查询条件更多，我们清空的当然也可以采用下面的方式，

这种方式也可以，只不过当里面项目比较多的时候，我们也要写好多代码

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

二、我们编辑弹窗，取消后或者关闭后，同样可以采用这种办法来清空哦。

欢迎看到的同学或者前辈吐槽，或者告诉我还有更好的办法~

转自：麻麻怪大侠（https://www.cnblogs.com/mamaguai/p/8143391.html）

果有人说开发Web系统，从来没用到过HTML标签中的表单标签的话，那他或她，肯定不是在逗你玩，而是他们开发的是静态页面。如果是动态内容的话，表单标签是必须用到的，毕竟它们是标签界的杠把子，表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

6.1 登录窗口

细细想来，现在上什么平台，好像都要登录之后，才可以完成相关的业务操作。上电商平台购物，登录之后才可以付款，付款了才有货收；上自媒体平台，只有登录之后，才可以发文章，发视频。既然登录这么常用，那我就HTML实现一下。

<form>标签用于创建供用户输入的HTML表单，它的action属性绑定后端的业务处理方法(URL);method方法可选get或post。

<input>标签规定了用户可以在其中输入数据的输入字段，type指定输入类型，text为文本，password为密码，可指定的类型还有好多种。name属性指定input的名称，而你输入的值，会被赋给value属性。

<button>按钮标签，常用的类型的有提交用户输入内容的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>

输出结果

6.2 个人信息

好多平台，为了给你推荐个性化的需求，会有一个页面让你填写个人信息，内容常常会有你的爱好、性别、生日什么的。如果你不填写，不友好的平台就不给你跳过。如果遇到这种平台，我一般就直接跳过，不再用，毕竟有些信息是个人隐私，比如老陈搞了10多年IT。

radio单选按钮，属性name的值相同时，多选一，否则都可以选择；

checkbox复习框：可以勾选多个。常用在兴趣等多个类型选择中；

select下拉列表框：在多个预设选项中，选择其中一个；

textarea多行输入框：输入的内容较多时，就用它。rows属性指定行数，cols指定列数。

<!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>

输出结果

好了，有关html表单的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##程序员##HTML5##表单##数据#

HTML标签相关的字符串格式化

string nl2br ( string $string )

nl2br() 就是将\n 替换成 <br> //javascript对\n才能够执行换行,对</br>是不能执行换行

htmlspecialchars() 把一些预定义的字符转换为 HTML 实体。

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

转换以下字符及对应的实体

& （和号） 成为 &
" （双引号） 成为 "
' （单引号） 成为 '
< （小于） 成为 <
> （大于） 成为 >

第二个参数: ENT_COMPAT 只转换双引号, 保留单引号, 为默认值 compat: 兼容性

ENT_QUOTES 同时转换两种引号 quotes: 引号

ENT_NOQUOTES 不对引号进行转换

<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>

输出结果:John & " 'Adams'

John & " 'Adams'

htmlentities() 可以将所有的非ASCII码字符转换为对应的实体代码;除字母、数字、\外, 汉字和键盘上其他字符都转换

<?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>
?>

返回的结果:A 'quote' "is <b>bold</b>

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

注意: htmlspecialchars()和htmlentities作用直接输出HTML脚本

htmlspecialchars()和htmlentities()函数对于转义字符"\"处理,不会转义实体代码,要么当转义字符对待,要么原样输出;

PHP中htmlentities和htmlspecialchars的区别

这两个函数的功能都是转换字符为HTML字符编码, 特别是url和代码字符串。防止字符标记被浏览器执行。

使用中文时没什么区别, 但htmlentities会格式化中文字符使得中文输入是乱码。

htmlentities转换所有的html标记, htmlspecialchars只格式化& ' " < 和 > 这几个特殊符号

addslashes() 在指定的预定义字符前添加反斜杠。

这些预定义字符是：单引号 (') 双引号 (") 反斜杠 (\) NULL字符(\x00)

提示：该函数可用于为存储在数据库中的字符串以及数据库查询语句准备合适的字符串。

注释：默认情况下，PHP 指令 magic_quotes_gpc 为 on，对所有的 GET、POST 和 COOKIE数据自动运行 addslashes()。

不要对已经被magic_quotes_gpc转义过的字符串使用 addslashes()，因为这样会导致双层转义。

遇到这种情况时可以使用函数 get_magic_quotes_gpc() 进行检测。(如:$c=(!get_magic_quotes_gpc())?addslashes($c):$c;)

在本例中，我们要向字符串中的预定义字符添加反斜杠：

<?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() 删除反斜线（"\"）

在提交的表单数据中 ' " \ 等字符前被自动加上一个\ ,这是配置文件php.ini中选项magic_quotes_gpc在起作用，

默认是打开的，如果不处理则将数据保存到数据库时，有可能会被数据库误当成控制符号而引起错误。

通常htmlspecialchars()和stripslashes()函数复合的方式，联合处理表单中的提交的数据htmlspecialchars(stripslashes())

strip_tags()

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

剥去 HTML、XML 以及 PHP 的标签。

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

输出结果:Hello world!

实例:

<?php
$str="<b>webserver;</b> & \ 'Linux' & Apache";
echo "$str"; //直接输出
echo "<br/>";
echo htmlspecialchars($str,ENT_COMPAT); //只转换双引号,为默认参数
echo "<br />";
echo htmlspecialchars($str,ENT_NOQUOTES); //不对引号进行转换
echo "<br />";
echo htmlspecialchars($str,ENT_QUOTES); //同时转换单引号和双引号
echo "<br />";
echo htmlentities($str); //将所有的非ASCII码字符转换为对应的实体代码
echo "<br />";
echo addslashes($str); //将" ' \ 字符前添加反斜线
echo "<br />";
echo stripslashes($str); //删除反斜线
echo "<br />";
echo strip_tags($str); //删除<html>标记
?>

输出结果:

webserver; & \ 'Linux' & Apache

在线咨询

上一篇：亚马逊HTML标记即将失效
下一篇：HTML基础篇笔记

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Vue 高效清空表单，一键清空表单

6.1 登录窗口

6.2 个人信息

您的项目需求