README

由 Sébastien L'haire 编写

一个基于 Boostrap 5 CSS 框架生成表单的 Laravel 库。提供 RichText 编辑器和 FontAwesome 的图标。还管理 DateRangePickerHelper、Uploader 和 Tags input 等包的结果输入。包演示可在此处查看。包括表单管理和验证。

安装

安装包

composer require seblhaire/formsbootstrap 如果你想使用相关包 DateRangePickerHelper、Uploader 和 Tagsinput，请参阅包文档。

Composer 会自动将包与 Laravel 连接。但你可以明确地在 config/app.php 中添加提供者和外观。

'providers' => [
	Seblhaire\FormsBootstrap\FormsBootstrapServiceProvider::class,
],
'aliases' => [
    "Form" => Seblhaire\\Formsbootstrap\\FormFacade::class
]

发布包（可选）。

$ php artisan vendor:publish

有关 JavaScript 和样式表，请参阅下一节。

JavaScript 和样式表

在网页上，每个 JS 库和 CSS 样式表都可以单独链接。如果您选择这种方式，首先下载并安装 jQuery 和 Bootstrap。然后按上述说明发布包文件，并在模板中放置以下标记

<script type="text/javascript" src="formsbootstrap/js/jquery.richtext.js"></script>
<script type="text/javascript" src="formsbootstrap/js/seb.formsbootstrap.js"></script>

网站通常使用许多库和样式表，浏览器必须在网站正确渲染之前下载许多文件。现代网站通常包含一个压缩的 JavaScript 文件，其中包含必要的脚本；样式表也遵循同样的原则。使用 Laravel，您可以使用 Laravel Mix 来编译文件。

使用 NPM 包管理器：npm install bootstrap jquery @fortawesome/fontawesome-free

然后您的 js 源文件应该类似于以下内容

global.jQuery = require('jquery');
var $ = global.jQuery;
var jQuery = global.JQuery;
window.$ = $;
window.jQuery = jQuery;
require('bootstrap');
require('../../vendor/seblhaire/formsbootstrap/resources/js/seb.formsbootstrap.js');
require('../../vendor/seblhaire/formsbootstrap/resources/js/jquery.richtext.js');

对于您的样式表

@import '~bootstrap/scss/bootstrap';
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "../../vendor/seblhaire/formsbootstrap/resources/css/formsbootstrap";
@import "../../vendor/seblhaire/formsbootstrap/resources/css/richtext";

配置文件

通过以下方式访问

config('formsbootstrap')

部分 formsbootstrap.classes 包含将用于表单验证、表单重置等操作的类选择器。部分 formsbootstrap.mandatory 为每个表单标签提供必填参数。部分 formsbootstrap.editorTranslations 包含 RichTextEditor 的翻译。最后，部分 formsbootstrap.defaults 包含默认标签参数。

如果您需要更改默认值，请使用命令 php artisan vendor:publish 并从列表中选择适当的包。然后配置文件将在文件 config/vendor/seblhaire/ 中可用。

表单标签

已经定义了模板，以便在 Laravel Blade 模板中快速构建表单。示例可以在上面提到的演示网站上找到。构建 <form> 标签的命令在上一个子节中描述。

HIDDEN 输入

Form::bsHidden(array $data)

参数

data: 数组参数。内容
- id: 必填字段 id。
- value: 必填字符串或数字值。
- name: 字段名称，如果与 id 不同。
- attributes: 要添加到输入的值数组。

TEXT 输入

Forms::bsText(array $data)

参数

data: 数组参数。内容
- id: 必填输入 id。
- labeltext: 必填输入标签。
  - name: 字段名称，如果与 id 不同。
- value: 输入中的预填充值。默认 null。
- required：输入必须填写以验证表单。默认 false。
- input_in_div：设置标签和输入是否应包含在 <div> 中。默认 true。
- divclass：要添加到包含标签和输入的 div 标签上的类。默认："mb-3"。如果 input_in_div 参数为 false，则不适用。
- helptext：帮助文本，将插入到字段上方。默认：空字符串。
- inputclass：输入标签的类。默认 "form-control"。
- labelclass：标签标签的类。默认 "form-label"。
- attributes：要添加到默认属性中的输入标签属性数组。默认：空数组。
- labelattributes：要添加到默认属性中的标签标签属性数组。默认：空数组。
- invalid-feedback：如果必填输入未填写，将显示的文本。默认：翻译键 formsbootstrap::messages.required：“此字段是必填项”。文本可以是字符串或翻译键。有关详细信息，请参阅下文。
- valid-feedback：如果必填输入已填写，将显示的文本。默认：空字符串。

示例

{!! Form::bsText(['id' => 'title', 'labeltext' => '标题', 'required' => true]) !!}

输入数字

Forms::bsNumber(array $data)

参数

data: 数组参数。内容
- id: 必填输入 id。
- labeltext: 必填输入标签。
- name: 字段名称，如果与 id 不同。
- value: 输入中的预填充值。默认 null。
- required：输入必须填写以验证表单。默认 false。
- input_in_div：设置标签和输入是否应包含在 <div> 中。默认 true。
- divclass：要添加到包含标签和输入的 div 标签上的类。默认："mb-3"。如果 input_in_div 参数为 false，则不适用。
- helptext：帮助文本，将插入到字段上方。默认：空字符串。
- inputclass：输入标签的类。默认 "form-control"。
- labelclass：标签标签的类。默认 "form-label"。
- attributes：要添加到默认属性中的输入标签属性数组。默认：空数组。
- labelattributes：要添加到默认属性中的标签标签属性数组。默认：空数组。
- invalid-feedback：如果必填输入未填写，将显示的文本。默认：翻译键 formsbootstrap::messages.required：“此字段是必填项”。文本可以是字符串或翻译键。有关详细信息，请参阅下文。
- valid-feedback：如果必填输入已填写，将显示的文本。默认：空字符串。

示例

{!! Form::Form::bsNumber(['id' => 'number2', 'labeltext' => '数字 2', 'value' => 5, 'attributes' => ['min' => 0, 'max' => 10], 'helptext' => '请输入介于 0 和 10 之间的数字', 'required' => true]);!!}

文本区域

Forms::bsTextarea(array $data)

参数

data: 数组参数。内容
- id: 必填输入 id。
- labeltext: 必填输入标签。
  - name: 字段名称，如果与 id 不同。
- value: 输入中的预填充值。默认 null。
- required：输入必须填写以验证表单。默认 false。
- input_in_div：设置标签和输入是否应包含在 <div> 中。默认 true。
- divclass：要添加到包含标签和输入的 div 标签上的类。默认："mb-3"。如果 input_in_div 参数为 false，则不适用。
- helptext：帮助文本，将插入到字段上方。默认：空字符串。
- inputclass：输入标签的类。默认 "form-control"。
- labelclass：标签标签的类。默认 "form-label"。
- attributes：要添加到默认属性中的输入标签属性数组。默认：空数组。
- labelattributes：要添加到默认属性中的标签标签属性数组。默认：空数组。
- invalid-feedback：如果必填输入未填写，将显示的文本。默认：翻译键 formsbootstrap::messages.required：“此字段是必填项”。文本可以是字符串或翻译键。有关详细信息，请参阅下文。
- valid-feedback：如果必填输入已填写，将显示的文本。默认：空字符串。

示例

{!! Form::bsTextarea(['id' => 'notes', 'labeltext' => '备注', 'required' => true]) !!}

编辑器

Forms::bsEditor(array $data)

参数

data: 数组参数。内容
- id: 必填输入 id。
- labeltext: 必填输入标签。
  - name: 字段名称，如果与 id 不同。
- value：在编辑器中显示的文本。默认：null。
- required：输入必须填写以验证表单。默认 false。
- helptext：帮助文本，将插入到字段上方。默认：空字符串。
- inputclass：输入标签的类。默认 "form-control"。
- labelclass：标签标签的类。默认 "form-label"。
- attributes：要添加到默认属性中的输入标签属性数组。默认：空数组。
- labelattributes：要添加到默认属性中的标签标签属性数组。默认：空数组。
- invalid-feedback：如果必填输入未填写，将显示的文本。默认：翻译键 formsbootstrap::messages.required：“此字段是必填项”。文本可以是字符串或翻译键。有关详细信息，请参阅下文。
- valid-feedback：如果必填输入已填写，将显示的文本。默认：空字符串。
- divclass：要添加到包含标签和输入的 div 标签上的类。默认："mb-3"。
- config：JavaScript 编辑器参数数组（有关详细信息，请参阅下一段）。
- configvar：初始化多个编辑器的 JavaScript 变量（有关详细信息，请参阅下一段）。
- translations：翻译数组。

编辑器配置

RichTextEditor 可以通过上述配置值进行参数化。编辑器可以通过多种方式初始化

使用 configvar 和变量名，该变量包含一个 JavaScript 配置变量

<script type="text/javascript">
 var editorConfig = {!! Form::validateEditorParams([
     'imageUpload' => false,
     'fileUpload' => false,
     'fonts' => false
 ],[
     'linkText' => 'Link content'
]) !!};
</script>

默认值为 null

使用 config 参数。默认

'config' => [
         'useParagraph' => true,
         'imageUpload' => false,
         'fileUpload' => false,
       ]

如果 config 和 configvar 都具有 null 值，则编辑器将填充默认值和英文文本。

文本格式化

bold：默认：true
italic：默认：true
underline：默认：true

文本对齐

leftAlign：默认：true
centerAlign：默认：true
rightAlign：默认：true
justify：默认：true

列表

ol：默认：true
ul：默认：true

标题

heading：默认：true

字体

fontColor：默认：true
fontSize：默认：true
fonts：默认：true
fontList：包含值的数组
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Geneva
- Georgia
- Helvetica
- Impact
- Lucida Console
- Tahoma
- Times New Roman
- Verdana

上传

建议使用 Uploader

imageUpload：默认：false
fileUpload：默认：false

媒体

videoEmbed：默认：true

链接

urls：默认：true

表格

table：默认：true

代码

removeStyles：默认：true
code：默认：true

颜色

colors：颜色数组。默认：空数组

下拉菜单

fileHTML：默认：空字符串
imageHTML 默认：空字符串

隐私

youtubeCookies：默认 true。

开发者设置

useSingleQuotes：默认 false
height 默认：0
heightPercentage：默认 0
id：默认空字符串
class：默认空字符串
useParagraph：默认 false
maxlength：默认 0
callback 默认 null
useTabForNext：默认 false

翻译

translations：翻译数组。使用上述列表中的键替换默认翻译。默认值在 config('formsbootstrap.editorTranslations') 中定义。默认文本列在键旁边。文本可以是字符串或翻译键。参见下面。
- title：formsbootstrap::editor.title "标题"
- white：formsbootstrap::editor.white "白色"
- black：formsbootstrap::editor.black "黑色"
- brown：formsbootstrap::editor.brown "棕色"
- beige：formsbootstrap::editor.beige "米色"
- darkBlue：formsbootstrap::editor.darkBlue "深蓝色"
- blue：formsbootstrap::editor.blue "蓝色"
- lightBlue：formsbootstrap::editor.lightBlue "浅蓝色"
- darkRed：formsbootstrap::editor.darkRed "深红色",
- red：formsbootstrap::editor.red "红色"
- darkGreen：formsbootstrap::editor.darkGreen "深绿色"
- green：formsbootstrap::editor.green "绿色"
- purple：formsbootstrap::editor.purple "紫色"
- darkTurquois：formsbootstrap::editor.darkTurquois "深翠绿"
- turquois：formsbootstrap::editor.turquois "翠绿"
- darkOrange：formsbootstrap::editor.darkOrange "深橙色"
- orange：formsbootstrap::editor.orange "橙色"
- yellow：formsbootstrap::editor.yellow "黄色"
- imageURL：formsbootstrap::editor.imageURL "图片 URL"
- fileURL：formsbootstrap::editor.fileURL "文件 URL"
- linkText：formsbootstrap::editor.linkText "链接文本"
- url：formsbootstrap::editor.url "URL"
- size：formsbootstrap::editor.size "大小"
- responsive：formsbootstrap::editor.responsive "响应式"
- text：formsbootstrap::editor.text "文本"
- openIn：formsbootstrap::editor.openIn "在...中打开"
- sameTab：formsbootstrap::editor.sameTab "同一标签页"
- newTab：formsbootstrap::editor.newTab "新标签页"
- align：formsbootstrap::editor.align "对齐"
- left：formsbootstrap::editor.left "左对齐"
- center：formsbootstrap::editor.center "居中对齐"
- right：formsbootstrap::editor.right "右对齐"
- rows：formsbootstrap::editor.rows "行数"
- columns：formsbootstrap::editor.columns "列数"
- add：formsbootstrap::editor.add "添加"
- pleaseEnterURL：formsbootstrap::editor.pleaseEnterURL "请输入一个 URL"
- videoURLnotSupported：formsbootstrap::editor.videoURLnotSupported "不支持视频 URL"
- pleaseSelectImage：formsbootstrap::editor.pleaseSelectImage "请选择一个图片"
- pleaseSelectFile：formsbootstrap::editor.pleaseSelectFile "请选择一个文件"
- bold：formsbootstrap::editor.bold "粗体"
- italic：formsbootstrap::editor.italic "斜体"
- underline：formsbootstrap::editor.underline "下划线"
- alignLeft：formsbootstrap::editor.alignLeft "左对齐"
- alignCenter：formsbootstrap::editor.alignCenter "居中对齐"
- alignRight：formsbootstrap::editor.alignRight "右对齐"
- addOrderedList：formsbootstrap::editor.addOrderedList "添加有序列表"
- addUnorderedList：formsbootstrap::editor.addUnorderedList "添加无序列表"
- addHeading：formsbootstrap::editor.addHeading "添加标题/标题"
- addFont：formsbootstrap::editor.addFont "添加字体"
- addFontColor：formsbootstrap::editor.addFontColor "添加字体颜色"
- addFontSize：formsbootstrap::editor.addFontSize "添加字体大小"
- addImage：formsbootstrap::editor.addImage "添加图片"
- addVideo : formsbootstrap::editor.addVideo "添加视频"
- addFile: formsbootstrap::editor.addFile "添加文件'"
- addURL : formsbootstrap::editor.addURL "添加 URL"
- addTable : formsbootstrap::editor.addTable "添加表格"
- removeStyles : formsbootstrap::editor.removeStyles "移除样式"
- code : formsbootstrap::editor.code "显示 HTML 代码"
- undo : formsbootstrap::editor.undo "撤销"
- redo : formsbootstrap::editor.redo "重做"
- close : formsbootstrap::editor.close "关闭"

示例

Form::bsEditor(['id' => 'text', 'labeltext' => 'Text', 'value' => $content]);

输入邮箱

Forms::bsEmail(array $data)

参数

data: 数组参数。内容
- id: 输入框的 id。默认 "email"。
  - name: 字段名称，如果与 id 不同。
- labeltext: 输入框的标签。默认为翻译键 formsbootstrap::messages.email 的内容："E-mail"。文本可以是字符串或翻译键。参看下文。
- value: 输入中的预填充值。默认 null。
- required：输入必须填写以验证表单。默认 false。
- verify: 在表单发送之前必须验证电子邮件地址格式。默认：true。参看下文。
- input_in_div：设置标签和输入是否应包含在 <div> 中。默认 true。
- divclass：要添加到包含标签和输入的 div 标签上的类。默认："mb-3"。如果 input_in_div 参数为 false，则不适用。
- helptext：帮助文本，将插入到字段上方。默认：空字符串。
- inputclass：输入标签的类。默认 "form-control"。
- labelclass：标签标签的类。默认 "form-label"。
- attributes：要添加到默认属性中的输入标签属性数组。默认：空数组。
- labelattributes：要添加到默认属性中的标签标签属性数组。默认：空数组。
- invalid-feedback: 如果必填输入未填写时显示的文本。默认：翻译键 formsbootstrap::messages.required："This field is required"。参看下文。
- valid-feedback：如果必填输入已填写，将显示的文本。默认：空字符串。
- email_regex: 验证电子邮件地址使用的正则表达式。参看下文。

电子邮件验证

可以使用正则表达式自动验证电子邮件字段。此表达式可在 config('formsbootstrap.defaults.email,email_regex') 中找到。它仅验证是否使用了有效的电子邮件地址，但不验证是否存在邮箱以及填写表单的人是否是合法用户。

如果您想检查发送表单的用户是否有权访问地址，我们建议使用当前由网络应用程序使用的标准验证程序：在主代码中发送一封包含回调函数链接的电子邮件。然后电子邮件地址得到验证，因为用户必须有权访问邮箱才能读取验证邮件。Laravel 提供了用于验证电子邮件地址的内置服务：内置服务。

此外，在表单处理控制器方法中，您应在服务器端验证电子邮件地址。使用如下方法

$validator = Validator::make($request->all(), [
      'email' => ['string', 'regex:' . config('formsbootstrap.defaults.email.regex')],
]);
if ($validator->fails()){
  return response()->json(['res' => $validator->errors()->all()]);
}

电子邮件也可以通过 'email' => 'required|string|email:rfc' 进行验证。

JavaScript 对象

使用此包，我们提供了一个简单的 JavaScript 对象，该对象将用于表单验证。它将由我们的包自动初始化。

jQuery('#email').sebEmailHelper({emailregex : /^ ... $/});

如果您需要在函数中验证字段，只需调用

if (jQuery('#email').data('sebemailhelper').check()){
...
}

示例

{!! Form::bsEmail[) !!}

输入密码

提供了两种标签方法。

第一种方法提供了一个简单的 <input type="password">，并可选地验证密码规则；
第二种方法输出完整的密码更改程序，包括（可选）旧密码、新密码和密码确认。
- 两种选项还允许密码以明文显示和生成新密码。
- 旧密码可以通过在主表单提交之前调用的特殊路由或主路由本身进行验证。

默认密码规则如下

最小 8 个字符，最大 80 个字符
至少一个小写字母和一个大写字母
至少一个数字
至少一个符号字符，例如 ^!?-_§=@$£¢€&§°[]{}*#%/.;,:+|()

Form::bsPassword(array $data)
Form::bsPasswordWithConfirm(array $data)

两种方法都有的常见参数

config('formsbootstrap.defaults.password_common') 包含两种方法都有的选项；

min_password 设置密码的最小长度。默认是 8。此值由包含在包配置文件中的 PHP 常量 PASSWORD_MIN_LENGTH 设置，因为此值用于密码验证正则表达式和其他配置文件中的值。
max_password 设置密码的最大长度。默认是 80。此值由 PHP 常量 PASSWORD_MAX_LENGTH 设置，原因同 PASSWORD_MIN_LENGTH。
password_regex 包含用于密码验证的 JavaScript 正则表达式。
password_regex_php 包含用于密码验证的 PHP 正则表达式。
authorized_special_chars 包含密码中允许的特殊字符列表。注意：如果更改此值，还必须修改 password_regex、password_regex_php 和 password_chars 中的值。
password_chars 包含密码中允许的所有字符。注意：如果更改此值，还必须修改 password_regex、password_regex_php 和 authorized_special_chars 中的值。
invalid-feedback: 如果必填输入未填写时显示的文本。默认：翻译键 formsbootstrap::messages.required："This field is required"。参看下文。
valid-feedback：如果必填输入已填写，将显示的文本。默认：空字符串。
input_in_div：设置标签和输入是否应包含在 <div> 中。默认 true。
divclass：要添加到包含标签和输入的 div 标签上的类。默认："mb-3"。如果 input_in_div 参数为 false，则不适用。

仅密码的参数

config('formsbootstrap.defaults.password') 包含唯一密码字段的选项

id：字段 ID。默认："password"。
name: 字段名称，如果与 id 不同。
labeltext：输入标签的标签。默认：翻译键 formsbootstrap::messages.password：“密码”。参看下文。
required：输入必须填写以验证表单。默认 false。
validate：在表单发送之前，密码必须验证密码规则。默认 false。
inputclass：输入标签的类。默认 "form-control"。
labelclass：标签标签的类。默认 "form-label"。
attributes：要添加到默认属性中的输入标签属性数组。默认：空数组。
labelattributes：要添加到默认属性中的标签标签属性数组。默认：空数组。

带确认的密码的参数

config('formsbootstrap.defaults.password-with-confirm') 包含密码验证组的选项

oldpass：旧密码字段的参数。内容
- id：字段 ID。默认："old_password"。
  - name: 字段名称，如果与 id 不同。
- labeltext：输入标签的标签。默认，翻译键 formsbootstrap::messages.old_password：“旧密码”。参看下文。
- inputclass：输入标签的类。默认 "form-control"。
- labelclass：标签标签的类。默认 "form-label"。
- attributes：要添加到默认属性中的输入标签属性数组，默认：['autocomplete' => "current-password"]，这是密码保险库所必需的。
- labelattributes：要添加到默认属性中的标签标签属性数组。默认：空数组。
newpass：新密码字段的参数。内容
- id：字段 ID。默认："password"。
  - name: 字段名称，如果与 id 不同。
- labeltext：输入标签的标签。默认，翻译键 formsbootstrap::messages.new_password：“新密码”。参看下文。
- inputclass：输入标签的类。默认 "form-control"。
- labelclass：标签标签的类。默认 "form-label"。
- attributes：要添加到默认属性中的输入标签属性数组，默认：['autocomplete' => "new-password"]，这是密码保险库所必需的。
- labelattributes：要添加到默认属性中的标签标签属性数组。默认：空数组。
newpassclear：新密码（明文）字段的参数。内容
- id：字段 ID。默认："password-clear"。
  - name: 字段名称，如果与 id 不同。
- inputclass：输入标签的类。默认 "form-control"。
- attributes：要添加到默认属性中的输入标签属性数组。默认：空数组。
confirmpass：确认密码字段的参数。内容
- id：字段 ID。默认："password_confirmation"。
  - name: 字段名称，如果与 id 不同。
- labeltext：输入标签的标签。默认，翻译键 formsbootstrap::messages.confirm_password：“确认密码”。参看下文。
- inputclass：输入标签的类。默认 "form-control"。
- labelclass：标签标签的类。默认 "form-label"。
- attributes：要添加到默认属性中的输入标签属性数组。默认：空数组。
- labelattributes：要添加到默认属性中的标签标签属性数组。默认：空数组。
pwdhiddenzone-id：<div> 中包含被点隐藏的密码的 ID。默认："password-hidden-div"。
pwdclearzone-id：<div> 中包含明文密码的 ID。默认："password-clear-div"。
show_old：必须显示“旧密码”字段。默认：true。
show_generate：显示生成密码按钮和隐藏/显示密码按钮。默认：true。
show_clear：显示隐藏/显示密码按钮。默认：true。如果 show_generate 选项也为 false，则值 false 才有效。
show_rules 显示一个按钮，该按钮打开一个模态框，显示密码规则。以下是相关选项
- showrulesbtntext：鼠标悬停在按钮上时显示的文本。默认，翻译键 formsbootstrap::messages.showrules：“显示密码规则”。参看下文。
- password_rules_modal_head：密码规则模态框中使用的文本。默认，翻译键 formsbootstrap::messages.password_rules：“密码规则”。参看下文。
- password_rules_intro 包含在规则列表之前在模态框中显示的文本。默认翻译键 formsbootstrap::messages.password_rules_intro：“密码必须包含：”。参看下文。
- password_rules_list 用于一个字符串数组，该数组将用于构建规则列表的列表。默认：空数组。如果数组为空，则函数 \Seblhaire\Formsbootstrap\FormsBootstrapUtils::complileRules() 将基于翻译键 formsbootstrap::messages.password_rule_length、password_rule_case、password_rule_number 和 password_rule_special_char 以及在 config('formsbootstrap') 中找到的配置条目构建规则数组。参见以下内容。
- close_rules 是使用 formsbootstrap::messages.close_rules 的文本。默认 "关闭"。参见以下内容。
generated_pass_length：由 "生成密码" 按钮生成的密码长度。默认：12。
helptext：帮助文本，将插入到字段上方。默认：空字符串。
pwdbtngroup-class：字段 "new-password" 中内联按钮组的类。默认："input-group"。
pwdbtn-class：字段 "new-password" 中内联按钮的类。默认："input-group-append"。
togglebtn-class：隐藏/显示按钮的类。默认："btn btn-info"。
toggledbtn-title：鼠标悬停时显示的隐藏/显示按钮的内容。默认翻译键 "formsbootstrap::messages.display_pwd"： "显示密码"。参见以下内容。
toggledbtn-icon-on："显示密码" 按钮的图标。默认：<i class="far fa-eye"></i>。此图标由 Font Awesome 包提供。
toggledbtn-icon-off："隐藏密码" 按钮的图标。默认：<i class="far fa-eye-slash"></i>。此图标由 Font Awesome 包提供。
generatebtn-icon："生成密码" 按钮的图标。默认 <i class="fa-solid fa-gears"></i>。此图标由 Font Awesome 包提供。
generatepwdbtn-class："生成密码" 按钮的类。默认："btn btn-outline-secondary"。
generatepwdbtn-lbl："生成密码" 按钮的文本。默认翻译键：formsbootstrap::messages.generate："生成"。参见以下内容。
generatepwdbtn-title："生成密码" 按钮的标题，鼠标悬停时显示。默认翻译键：formsbootstrap::messages.generate_long："生成新密码"。参见以下内容。
oldpass-feedback：在验证旧密码缺失时显示的反馈。默认翻译键：formsbootstrap::messages.incorrectoldpass："旧密码不正确或为空"。参见以下内容。
oldpass-validfeedback：当旧密码有效时显示的反馈。默认：空字符串。
invalid-feedback：当密码无效（即被验证正则表达式拒绝）时显示的反馈。默认翻译键：formsbootstrap::messages.invalidpassword："密码无效或为空"。参见以下内容。
nomatch-feedback：当密码和确认不匹配或确认缺失时显示的反馈。默认翻译键：formsbootstrap::messages.nomatchpassword："确认缺失或不匹配密码"。参见以下内容。
nomatch-validfeedback：如果密码与确认匹配，将显示的反馈。默认：空字符串。
valid-feedback：在所有验证通过时显示的反馈。
checkoldpassurl：旧密码可以在临时代理路由中验证，或者在表单处理方法本身中验证。默认是 null。如果您想在新表单提交之前验证旧密码并更改密码，请使用接受 POST 方法并返回 JSON 结果的路由来设置此选项。密码的有效性可以通过我们的密码处理类返回，或者
- 通过使用我们的标准回调方法来检查我们的路由返回的两个 JSON 值的值
  - ok 必须是 true 或 false 以断言密码验证是否已完成。
  - password_ok必须为true或false，以断言密码是否正确。
- 通过定义自己的验证密码的函数，并通过设置checkoldpass_callback及其名称。例如
```
 		<script>
 			var chkpass = function(res){
 				return res.password_checked == 'done';
 			}
 		</script>
 		```
```

JavaScript 对象

使用此包，我们提供了一个简单的JavaScript对象，该对象将由表单验证使用。它由我们的包自动初始化。

 jQuery('#password').sebPasswordHelper({
    passregex : ...,
    ...
 });

对象函数可以通过输入按钮或表单验证来调用，但您也可以在其他脚本中调用它们。

jQuery('#password').data('sebpasswordhelper').generate()使用通过规则的生成的密码填充输入框；
jQuery('#password').data('sebpasswordhelper').toggleInputs()切换新密码的可见性或不可见性；
jQuery('#password').data('sebpasswordhelper').clearpass()清空密码输入框；
jQuery('#password').data('sebpasswordhelper').checkStrength()验证新密码是否通过规则；
jQuery('#password').data('sebpasswordhelper').checkIdentity()验证新密码和确认密码是否相同
jQuery('#password').data('sebpasswordhelper').checkOldPass()验证旧密码是否不为空；如果您在config('formsbootstrap.defaults.password-with-confirm.checkoldpassurl')中指定了一个路由，此方法还检查旧密码是否正确。参见上文。

示例

{!! Form::bsPassword(['required' => true, 'validate' => false]) !!}

{!! Form::bsPasswordWithConfirm(['checkoldpassurl' => route('formsbootstrap_checkoldpass')]) !!}

SELECT

Forms::bsSelect(array $data)

参数

data: 数组参数。内容
- name: 必填输入框的id和name。
- labeltext: 标签文本
- values: 选项数组（key => values）。
- default: 默认值的key。
- multiple: 选择多个值。默认：false
- input_in_div：设置标签和输入是否应包含在 <div> 中。默认 true。
- divclass：要添加到包含标签和输入的 div 标签上的类。默认："mb-3"。如果 input_in_div 参数为 false，则不适用。
- helptext：帮助文本，将插入到字段上方。默认：空字符串。
- inputclass：输入标签的类。默认 "form-control"。
- labelclass：标签标签的类。默认 "form-label"。
- attributes：要添加到默认属性中的输入标签属性数组。默认：空数组。
- labelattributes：要添加到默认属性中的标签标签属性数组。默认：空数组。
- required: 需要一个值。
- feedback: 验证表单后必须显示的反馈。
- invalid-feedback: 如果必填输入未填写时显示的文本。默认：翻译键 formsbootstrap::messages.required："This field is required"。参看下文。
- valid-feedback：如果必填输入已填写，将显示的文本。默认：空字符串。

示例

{!! Form::bsSelect(['name' => 'priority', 'labeltext' => 'Priority', 'values' => ['lowest' => 'Lowest','low' => 'Low', 'medium' => 'Medium','high' => 'High','highest' => 'Highest'], 'default' => 'medium']) !!}

{!! Form::bsSelect(['name' => 'os', 'labeltext' => 'Operating system', 'values' => ['mac' => 'MacOs','windows' => 'Windows', 'linux' => 'Linux', 'vms' => 'Vms','unix' => 'Unix'], 'default' => 'linux', 'multiple' => true]) !!}

INPUT CHECKBOX

Forms::bsCheckbox(array $data)

参数

data: 数组参数。内容
- name: 必填输入框的id和name。
- values: 必填选项数组（key => values）。
- checkedvalues: 要选中的值。默认：空数组。
- required：输入必须填写以验证表单。默认 false。
- attributes：要添加到默认属性中的输入标签属性数组。默认：空数组。
- mainlabel: 包含所有复选框输入的标签
- mainlabelclass: 主标签的class。默认："form-label"
- inputclass：输入标签的类。默认 "form-control"。
- labelclass：标签标签的类。默认 "form-label"。
labelattributes：要添加到默认属性中的标签标签属性数组。默认：空数组。
- mainattr: 主div的属性数组。默认：空数组。
- invalid-feedback: 如果必填输入未填写时显示的文本。默认：翻译键 formsbootstrap::messages.required："This field is required"。参看下文。
- valid-feedback：如果必填输入已填写，将显示的文本。默认：空字符串。
- helptext：帮助文本，将插入到字段上方。默认：空字符串。
- divclass: 主<div>的class。默认："mb-3"
- divelt: 包含每个输入的<div>的class。默认："form-check form-check-inline".
- switch字段必须在开关模式下显示。默认：false.
- switch-class开关模式的class。默认："form-switch"

示例

{!! Form::bsCheckbox(['name' => 'os', 'values' => ['mac' => 'MacOs','windows' => 'Windows', 'linux' => 'Linux', 'vms' => 'Vms','unix' => 'Unix'], 'checkedvalues' => ['vms', 'mac'],'mainlabel' => 'Operating system']) !!}

{!! Form::bsCheckbox(['name' => 'languages', 'values' => ['en' => 'English', 'fr' => 'Français', 'de' => 'Deutsch', 'it' => 'Italiano', 'es' => 'Español', 'pt' => 'Português'], 'mainlabel' => 'Languages', 'switch' => true, 'required' => true]) !!}

{!! Form::bsCheckbox(['name' => 'conditions', 'values' => ['accepted' => 'I agree to terms and conditions'], 'required' => true, 'invalid-feedback' => "You must agree before submitting."]) !!}

INPUT RADIO

Forms::bsRadio(array $data)

参数

data: 数组参数。内容
- name: 必填输入框的id和name。
- values: 必填选项数组（key => values）。
- checkedvalue: 要选中的值。默认 null.
- required：输入必须填写以验证表单。默认 false。
- attributes：要添加到默认属性中的输入标签属性数组。默认：空数组。
- mainlabel: 包含所有单选输入的标签
- mainlabelclass: 主标签的class。默认："form-label"
- inputclass：输入标签的类。默认 "form-control"。
- labelclass：标签标签的类。默认 "form-label"。
  - labelattributes：要添加到默认属性中的标签标签属性数组。默认：空数组。
- mainattr: 主div的属性数组。默认：空数组。
- helptext：帮助文本，将插入到字段上方。默认：空字符串。
- invalid-feedback: 如果必填输入未填写时显示的文本。默认：翻译键 formsbootstrap::messages.required："This field is required"。参看下文。
- valid-feedback：如果必填输入已填写，将显示的文本。默认：空字符串。
- divclass: 主<div>的class。默认："mb-3"
- divelt: 包含每个输入的<div>的class。默认："form-check form-check-inline".

示例

!!{ Form::bsRadio(['name' => 'priority', 'values' => ['lowest' => '最低', 'low' => '低', 'medium' => '中等', 'high' => '高', 'highest' => '最高'], 'checkedvalue' => 'medium', 'mainlabel' => '优先级']) !!}

颜色选择器

Forms::bsColorpicker(array $data)

参数

data: 数组参数。内容
- name: 必填输入框的id。
  - name: 字段名称，如果与 id 不同。
- labeltext 必填输入框的标签
- value: HTML颜色代码。例如：##ffaa94
- input_in_div：设置标签和输入是否应包含在 <div> 中。默认 true。
- inputclass: 输入标签的class。默认："form-control form-control-color"
- labelclass：标签标签的类。默认 "form-label"。
- attributes：要添加到默认属性中的输入标签属性数组。默认：空数组。
- mainattr: 要添加到默认属性中的主div标签属性数组。默认：空数组。
- labelattributes：要添加到默认属性中的标签标签属性数组。默认：空数组。
- divclass: 主<div>的class。默认："mb-3"
- title: 模态框标题。默认：翻译键 formsbootstrap::messages.colorpicker "点击选择颜色"。参照下面。

示例

!!{ Form::bsColorpicker(['id' => 'color', 'labeltext' => '颜色', 'value' => '#ff0000']) !!}

范围

Forms::bsSelect(array $data)

参数

data: 数组参数。内容
- name: 必填输入框的id。
- labeltext: 必填输入标签。
  - name: 字段名称，如果与 id 不同。
- value: 默认值。默认：null。
- input_in_div：设置标签和输入是否应包含在 <div> 中。默认 true。
- inputclass: 输入标签的class。默认："form-control form-range formsbootstrap-range"
- labelclass：标签标签的类。默认 "form-label"。
- attributes：要添加到默认属性中的输入标签属性数组。默认：空数组。
- groupclass: 包含范围滑块的
  的class。默认："input-group"
- groupeltclass: 包含边界值的的class。默认："input-group-text formsbootstrap-inputgt"
- groupeltresclass : 当前值的class。默认："input-group-text"
- showvalue: 显示当前值。默认 true
- valueprefix: 当前值前的文本。默认：翻译键 formsbootstrap::messages.rangevalueprefix "已选择"。参照下面。
- show_bounds: 显示边界值（最小和最大）。默认 true。
- labelattributes：要添加到默认属性中的标签标签属性数组。默认：空数组。
- divclass: 主<div>的class。默认："mb-3"
- min: 最小范围值。默认 null
- max: 最大范围值。默认 null
- step: 滑动此元素时的增量值。默认 null 或 1。

示例

!!{ Form::bsRange(['id' => 'range', 'labeltext' => '范围', 'min' => 0, 'max' => 10, 'value' => "3", 'required' => true]); !!}

输入提交

Forms::bsSubmit(array $data)

参数

data: 数组参数。内容
- id: 输入框的id。默认："submit"
- label: 按钮文本。默认：翻译键 formsbootstrap::messages.send："发送"。参照下面。
- class: 按钮class。默认："btn btn-primary"
- attributes：要添加到默认属性中的输入标签属性数组。默认：空数组。

示例

!!{ Form::bsSubmit([]) !!}

输入按钮

Forms::bsButton(array $data)

参数

data: 数组参数。内容
- id: 必填。输入框的id和name。
- label: 必填。按钮标签。
- class: 按钮class。默认："btn btn-secondary"
- action: 点击时调用的JavaScript代码。默认：null
- attributes：要添加到默认属性中的输入标签属性数组。默认：空数组。

示例

!!{ Form::bsButton(['id' => 'cancel', 'action' => 'alert("cancel clicked");', 'label' => '取消']) !!}

表单

表单字段必须包含在<form></form>之间。您只需使用以下函数。然后创建一个JavaScript对象用于表单验证。

Form::bsOpen(array $data)
Form::bsClose();

表单自动插入一个包含CSRF令牌的隐藏输入框。它还可以自动插入提交按钮和可选的其他按钮。它还可以构建一个隐藏的警告div以包含表单提交结果。

参数

data数组参数
- id: 必填表单id标签。
- action: 表单脚本的路径。默认 null。
- method: 定义用于发送表单的方法。默认：post
- validate: 向表单添加验证。默认：true
- class: CSS类。默认：空。
- options: 其他选项。默认：[]
- checkonleave : 验证当值被修改并且用户点击离开页面时表单是否已被提交。
- ajaxcallback：必填，表单处理后的回调函数名称。该函数必须返回一个字符串，该字符串将被显示为结果消息。
```
 <script>
 var processform = function(data){
 	return data.success + ' ' + data.formcontent;
 }
 </script>
```
对于此函数，您的表单处理控制器方法应返回JSON结果 return response()->json(['ok' => true, 'message' => 'Success!', 'formcontent' => ...表单内容...]。在更复杂的应用程序中，回调方法可以刷新页面上的其他元素，显示新页面等。详见下文。
- filldatacallback：表单填写值后的回调函数。默认 null。参见下文。
- data_build_function：构建发送到表单处理的函数。默认 null。在大多数情况下，下文提到的 JavaScript 对象为我们构建数据。但如果您包含本文档顶部未列出且未由本表单包处理的表单字段，您可以定义一个自定义函数，如
```
var builddata = function(){
   return Array(
     { name: "main_id", value: jQuery('#main_id').val() },
     { name: "title", value: jQuery('#title').val() },
    ...
   );
 }
```
- csrf：csrf令牌，在表单创建时自动初始化。
- remove_validation_function：用于移除自定义字段验证消息的回调函数。如果您的表单包含本文档顶部未列出且未由本表单包处理的字段，请使用此函数。默认：null。
- clearonclick_function：如果您的表单上有验证消息，并点击带有消息的字段，则此消息将被移除。如果您的表单包含本文档顶部未列出且未由本表单包处理的字段，请使用此函数。默认：null。
- validate_function：当表单进行验证时调用的回调函数。如果您的表单包含本文档顶部未列出且未由本表单包处理的字段，请使用此函数。函数必须在所有字段有效时返回 true，否则返回 false。默认：null。
- clear_function：如果您通过 reset() 函数清空表单，则使用的回调函数。如果您的表单包含本文档顶部未列出且未由本表单包处理的字段，请使用此函数。默认：null。
- resetvalues：表单重置时用于填充隐藏值的值。例如：['id' => 0, 'type' => 'article']。默认：[]。
- check_modified_on_reset：在表单重置时，设置用户是否必须确认删除修改后的值。默认：true。
- modified_on_reset_confirm_text：如果表单用户想要重置修改后的表单，则显示在确认框中的文本。默认：翻译键 formsbootstrap::messages.modified_on_reset_confirm_text："此表单已被修改。您确定要重置它吗？"。详见下文。
- buildbuttons：自动插入提交按钮以及可选的其他按钮。默认：true。
- buttondivclass：包含按钮的div的类。默认：mb-3 btngroup。
- submitbtnclass：提交按钮的类。默认：btn btn-primary。
- submitbtnlbl：提交按钮的标签。默认：翻译键 formsbootstrap::messages.send："发送"。详见下文。
- additionalbuttons：包含在数组中的额外按钮列表。默认：[]。在上面的示例中，我们有两个按钮，分别用参数 id 标识，按钮类在 class 中，按钮值在 value 中。[['id' => 'cancelBtn', 'class' => 'btn btn-secondary', 'value' => '取消'], ['id' => 'filldata', 'class' => 'btn btn-warning', 'value' => '用示例数据填写表单']]
- evalajaxres_callback：表单结果成功评估函数。默认值 null。 <script> var evalres = function(res){ return res.formresult == 'success'; } </script> 在这里我们定义了一个检查表单返回的值 formresult 的函数。见下面。
- evalajaxres_resultmessage：检索表单处理方法返回的错误信息。默认值 null。 <script> var resmsg = function(res){ return res.msg; } </script> 在这里我们定义了一个检查表单返回的值 msg 的函数。见下面。
  - buildresultalert：在按钮之前构建一个隐藏的 result div，用于显示表单结果。默认：true。
  - alertcommonclass：用于错误和成功结果的 div 类。默认：alert。
  - alertsuccessclass：在成功结果的情况下添加到 div 的类。默认：alert-success。
  - alerterrorclass：在错误结果的情况下添加到 div 的类。默认：alert-danger。
  - alertdisplaytimeok：成功消息显示的时间（毫秒）。默认：4000。
  - alertdisplaytimefalse：错误消息显示的时间（毫秒）。默认：8000。
  - resultok：如果未定义其他消息，则在表单成功结果时显示的消息。默认：翻译键 formsbootstrap::messages.resultok："结果成功"。参看下面。
  - resultfalse：如果未定义其他消息，则在表单错误结果时显示的消息。默认：翻译键 formsbootstrap::messages.resultfalse："处理错误"。参看下面。
- tokenexpired：当令牌过期（HTTP错误 419）后长时间不活动时显示的消息。默认：翻译键 formsbootstrap::messages.tokenexpired："令牌过期。请重新加载表单"。参看下面。
- nonauthorized：如果出现（HTTP错误 403）时显示的消息。默认：翻译键 formsbootstrap::messages.nonauthorized："您不允许执行此操作"。参看下面。

表单选择类

使用 jQuery，您可以使用类来选择元素。例如，jQuery('.verify') 选择当前页面中包含此类的所有项。您不需要为这些类定义 CSS 样式，但您可以。

必填字段验证

这些类选择必须不为空的元素

requiredclass：选择所有不需要特殊程序的表单输入。默认："verify"。当需要时，我们的脚本会自动插入此类。
requiredcheckclass：选择所有 <input type="checkbox"> <div> 容器。默认："verify-check"。当需要时，我们的脚本会自动插入此类。
selcheckclass：选择包含复选框组的 <div>。默认："selcheck"。当需要时，我们的脚本会自动插入此类。
requiredspecialclass：选择需要特殊处理的编辑器输入、上传器、日期范围和标签字段。默认："verify-special"。注意：必须手动将此类添加到必须检查的元素。

元素特殊验证

某些表单元素有特殊的验证规则，用于验证良好格式。当需要时，这些类会自动插入

verifymailclass：选择所有 <input type="email">。默认："verify-email"。
verifypassclass：选择密码输入组。默认："verify-pass"。
verifypassmatchclass：选择密码确认输入。默认："verify-pass-match"。
verifypassold：选择旧密码输入。默认："verify-pass-old"。

表单重置类

当调用表单重置函数时，我们通过以下类选择字段。这些类会自动添加到元素，除了最后一个

resettextclass：用于选择可以重置的 <input> 字段。默认："resettext"。
resetselectclass：用于选择可以重置的<select>元素的类。默认值："resetselect"。
resetcheckclass：用于选择<input type="check">元素的类。默认值："resetcheck"。
resetradioclass：用于选择<input type="radio">元素的类。默认值："resetradio"。
resetspecialclass：选择需要特殊处理的编辑器输入、上传者、日期范围和标签字段。默认值："resetspecial"。注意：此类必须手动添加到必须检查的元素。

JavaScript表单处理对象

使用此包，我们构建了一个JavaScript对象，用于处理表单事件、验证表单并将表单结果发送到回调函数。它使用参数值自动初始化。

jQuery('#form_complete').sebFormHelper({ ... })

通常您不需要自己调用此对象的方法。尽管JavaScript不允许区分私有、受保护和方法，但这里我们描述了公共方法。

submit

此函数可用于提交表单而无需按常规提交按钮。在提交表单之前，此方法会验证表单，然后处理结果。

jQuery('#form_complete').data('sebformhelper').submit()

首先评估表单成功，以查看是否显示错误消息或继续执行成功回调操作。

如果选项evalajaxres_callback中定义了一个函数，我们使用返回值；
否则，我们检查表单返回的值，并检查ok参数，它必须是true或false。

错误消息

如果表单处理引发异常，将显示默认错误消息。
如果表单处理返回错误消息（例如Laravel表单验证错误），我们尝试检索消息：请确保填写了所有必要字段。
- 如果定义了evalajaxres_resultmessage中的函数，我们使用返回值。
  - 如果没有，我们返回包含在message参数中的字符串。

validate

验证表单，通常由提交函数调用。验证通过时返回true，失败时返回false。如果您已定义了validate_function参数，则此回调函数也将被调用。

jQuery('#form_complete').data('sebformhelper').validate()

save

此方法将所有字段内容存储在对象属性中，用于检查在表单用户离开页面之前是否已保存表单值。

jQuery('#form_complete').data('sebformhelper').save()

isModified

此方法检查自上次调用save()方法以来表单数据是否已修改。返回true或false。

if (jQuery('#form_complete').data('sebformhelper').save()){
...
}

fillwithdata

您可能需要用数据库中现有的数据填充表单，这些数据是表单用户需要修改的。首先编写一个控制器方法，该方法通过一个与路由关联的控制器返回所需的值，这些值在一个Json对象中。对象键必须与表单名称相同，值必须兼容。

public function loadData(Request $request){
	/** HERE DON'T FORGE TO VALIDATETE VALUES*/
	/** load data from database**/
	$data = Article::find($request->input('id'));
	return response()->json([
      'ok' => true,
      'data' => [
        'main_id' => $data->id,
        'title' => $data->title,
        ]]);
}

然后通过Ajax调用此控制器方法

jQuery.ajax({
    url: '{!! route('loaddata') !!},
    encoding: 'utf8',
    type: 'post',
    dataType: 'json',
    cache: false,
    headers: {
      'X-CSRF-Token': '{!! csrf_token() !!}'
    }
  })
  .done(function(res){
    if (res.ok){
      jQuery('#form_complete').data('sebformhelper').fillwithdata(res.data);
    }
  });

然后，具有与结果键对应id的表单字段将被填充。这也适用于本文件顶部提到的其他兼容包。如果您已定义了参数filldatacallback的函数，则将使用该回调填充其他字段。在表单填写后调用save()方法。

removevalidation

此方法仅清除所有验证消息。

jQuery('#form_complete').data('sebformhelper').removevalidation()

reset

重置表单，即清空所有值并重置默认值。如果参数check_modified_on_reset为true，将显示一个确认框，其中包含参数modified_on_reset_confirm_text的文本。如果您已定义了带有参数clear_function的回调函数，则它也将被调用。

jQuery('#form_complete').data('sebformhelper').reset()

errormessage

在按钮之前显示错误消息。

jQuery('#form_complete').data('sebformhelper').errormessage(message);

successmessage

在按钮之前显示成功消息。

jQuery('#form_complete').data('sebformhelper').successmessage(message);

alertresult

通过覆盖默认值，在按钮之前显示消息。

message包含要显示的消息
isok 是一个布尔值，用于设置是否显示错误或成功消息。
delay 用于在隐藏消息之前显示消息
classok 用于成功消息的类（们）
classerror 用于错误消息的类（们）

jQuery('#form_complete').data('sebformhelper').alertresult(message, isok, delay, classok, classerror)

示例

Form::bsOpen([
  'id' => 'form_complete',
  'action' => route('formsbootstrap_processform'),
  'ajaxcallback' => 'processform',
  'filldatacallback' => 'datafill'
])

翻译键

Laravel 在进程早期就加载配置文件。因此，配置文件不能包含 __('translation.key')。因此，我们创建了一个助手，既可以直接打印字符串，也可以将翻译键发送到翻译助手。翻译键可以用字符 # 分隔 - 例如："#formsbootstrap::messages.required#"。

在模板中，通过例如 Form::translateOrPrint($data['oldpass']['labeltext']); 调用助手

请随意用您自己的语言翻译键，并将它们发送给作者，或者直接在 GitHub 上发起合并请求。

有疑问？贡献？

请随意发送功能请求或合并请求给作者，或者简单地提出问题。

seblhaire / formsbootstrap

维护者

详情

README

安装

JavaScript 和样式表

配置文件

表单标签

HIDDEN 输入

参数

TEXT 输入

参数

示例

输入数字

参数

示例

文本区域

参数

示例

编辑器

参数

编辑器配置

文本格式化

文本对齐

列表

标题

字体

上传

媒体

链接

表格

代码

颜色

下拉菜单

隐私

开发者设置

翻译

示例

输入邮箱

参数

电子邮件验证

JavaScript 对象

示例

输入密码

两种方法都有的常见参数

仅密码的参数

带确认的密码的参数

JavaScript 对象

示例

SELECT

参数

示例

INPUT CHECKBOX

参数

示例

INPUT RADIO

参数

示例

颜色选择器

参数

示例

范围

参数

示例

输入提交

参数

示例

输入按钮

参数

示例

表单

参数

表单选择类

必填字段验证

元素特殊验证

表单重置类

JavaScript表单处理对象

submit

错误消息

validate