native-ui+vue实现带验证表单提交示例代码
代码语言：html
所属分类：表单美化
代码描述：native-ui+vue实现带验证表单提交示例代码，支持表单大小设置，展示了native-ui所有的表单控件。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.2.22.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/naive-ui@2.34.4.js"></script>
</head>
<body>
<div id="app">
<n-radio-group
v-model:value="size"
name="top-size"
style="margin-bottom: 12px"
>
<n-radio-button value="small">
小
</n-radio-button>
<n-radio-button value="medium">
中
</n-radio-button>
<n-radio-button value="large">
大
</n-radio-button>
</n-radio-group>
<n-form
ref="formRef"
:model="model"
:rules="rules"
:size="size"
label-placement="top"
>
<n-grid :cols="24" :x-gap="24">
<n-form-item-gi :span="12" label="Input" path="inputValue">
<n-input v-model:value="model.inputValue" placeholder="Input" />
</n-form-item-gi>
<n-form-item-gi :span="12" label="Textarea" path="textareaValue">
<n-input
v-model:value="model.textareaValue"
placeholder="Textarea"
type="textarea"
:autosize="{
minRows: 3,
maxRows: 5
}"
/>
</n-form-item-gi>
<n-form-item-gi :span="12" label="Select" path="selectValue">
<n-select
v-model:value="model.selectValue"
placeholder="Select"
:options="generalOptions"
/>
</n-form-item-gi>
<n-form-item-gi
:span="12"
label="Multiple Select"
path="multipleSelectValue"
>
<n-select
v-model:value="model.multipleSelectValue"
placeholder="Select"
:options="generalOptions"
multiple
/>
</n-form-item-gi>
<n-form-item-gi :span="12" label="Datetime" path="datetimeValue">
<n-date-picker v-model:value="model.datetimeValue" type="datetime" />
</n-form-item-gi>
<n-form-item-gi :span="12" label="Switch" path="switchValue">
<n-switch v-model:value="model.switchValue" />
</n-form-item-gi>
<n-form-item-gi
:span="12"
label="Checkbox Group"
path="checkboxGroupValue"
>
<n-checkbox-group v-model:value="model.checkboxGroupValue">
<n-space>
<n-checkbox value="Option 1">
Option 1
</n-checkbox>
<n-checkbox value="Option 2">
Option 2
</n-checkbox>
<n-checkbox value="Option 3">
Option 3
</n-checkbox>
</n-space>
</n-checkbox-group>
</n-form-item-gi>
<n-form-item-gi :span="12" label="Radio Group" path="radioGroupValue">
<n-radio-group v-model:value="model.radioGroupValue" name="radiogroup1">
<n-space>
<n-radio value="Radio 1">
Radio 1
</n-radio>
<n-radio value="Radio 2">
Radio 2
</n-radio>
<n-radio value="Radio 3">
Radio 3
</n-radio>
</n-space>
</n-radio-group>
</n-form-item-gi>
<n-form-item-gi
:span="12"
label="Radio Button Group"
path="radioGroupValue"
>
<n-radio-group v-model:value="model.radioGroupValue" name="radiogroup2">
<n-radio-button value="Radio 1">
Radio 1
</n-radio-button>
<n-radio-button value="Radio 2">
Radio 2
</n-radio-button>
<n-radio-button value="Radio 3">
Radio 3
</n-radio-button>
</n-radio-group>
</n-form-item-gi>
<n-form-item-gi :span="12" label="Input Number" path="inputNumberValue">
<n-input-number v-model:value="model.inputNumberValue" />
</n-form-item-gi>
<n-form-item-gi :span="12" label="Time Picker" path="timePickerValue">
<n-time-picker v-model:value="model.timePickerValue" />
</n-form-item-gi>
<n-form-item-gi :span="12" label="Slider" path="sliderValue">
<n-slider v-model:value="model.sliderValue" :step="5" />
</n-form-item-gi>
<n-form-item-gi :span="14" label="Transfer" path="transferValue">
<n-transfer
v-model:value="model.transferValue"
style="width: 100%"
:options=&qu.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0