# 表单提交
## 前言
我们使用 `M8.4移动前端框架` 进行表单提交页面的开发
已根据 教程 章节了解 `M8` 开发的思路
## 新建模块
模块代码统一放在 `src/pages` 下，每个模块应用对应一个文件夹。
我们在此路径下新建文件夹，例如 `m8form`。
在 `m8form` 文件夹下新建 `router.ts` 文件，如下：
`src/pages/m8form/router.ts` :
```js
/**
* router.js无需import组件，需要path路径与vue组件名称保持匹配。
* routers数组下有效参数只有path与style。
* 构建时会自动将模块下的路由配置合并到pages.json内。
*/
// 定义路由规则，url匹配path时，加载component组件页面
const routes = [
{
path: 'pages/m8form/form-sub',
style: {
navigationBarTitleText: '表单提交',
},
},
];
// 导出路由文件
export default routes;
```
## 表单页面
接下来我们新建 `form-sub.vue` 组件页面
`form-sub.vue` :
```html
<template>
<em-form @submit="onSubmit" @failed="onFailed">
<em-field
v-model="form.username"
label="用户名"
placeholder="用户名"
:rules="[{ required: true, message: '请填写用户名' }]"
/>
<em-field
v-model="form.password"
type="password"
label="密码"
placeholder="密码"
:rules="[{ required: true, message: '请填写密码' }]"
/>
<em-field label="滑动开关" input-align="right">
<template #input>
<em-switch v-model="form.switchChecked" />
</template>
</em-field>
<em-field label="单选框">
<template #input>
<em-radio-group v-model="form.radio" direction="horizontal">
<em-radio name="1">单选框 1</em-radio>
<em-radio name="2">单选框 2</em-radio>
</em-radio-group>
</template>
</em-field>
<em-field label="数字步进器">
<template #input>
<em-stepper v-model="form.stepper" />
</template>
</em-field>
<em-field label="评分">
<template #input>
<em-rate v-model="form.rate" />
</template>
</em-field>
<div style="margin: 16px">
<em-button round block type="info" native-type="submit">提交</em-button>
</div>
</em-form>
</template>
```
`M8`的 `easycom` 机制，将 M8-UI 组件引用进一步优化，开发者可以直接在 `template` 中使用，无需在 `script` 里额外导入和注册。
```html
<script lang="ts" setup>
import { ref } from 'vue';
const form = ref({
username: '', // 用户名
password: '', // 用户密码
switchChecked: false, // 默认滑动开关为false
radio: '1', // 默认radio置1
stepper: 1, // 默认步进器为1
rate: 3, // 默认评分3
});
const onSubmit = () => {
console.log('onSubmit', form.value);
};
const onFailed = (errors) => {
console.log('onFailed', errors);
};
</script>
```
一个简单的表单提交页面就完成了
