# 表单提交
## 前言
我们使用 `M8.3移动前端框架` 进行表单提交页面的开发
已根据 教程 章节了解 `M8` 开发的思路
## 新建模块
模块代码统一放在 `src/pages` 下，每个模块应用对应一个文件夹。
我们在此路径下新建文件夹，例如 `m8form`。
在 `m8form` 文件夹下新建 `router.js` 文件，如下：
`src/pages/m8form/router.js` :
```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` 机制，将组件引用进一步优化，开发者只管使用，无需在 `JS` 里额外导入和注册。
```js
// script部分
export default {
data() {
return {
form: {
username: '', // 用户名
password: '', // 用户密码
switchChecked: false, // 默认滑动开关为false
radio: '1', // 默认radio置1
stepper: 1, // 默认步进器为1
rate: 3, // 默认评分3
},
};
},
// 计算属性
computed: {},
// 侦听属性
watch: {},
// 实例数据创建完成后调用
created() {},
// 实例DOM被挂载后调用
mounted() {},
methods: {
// 验证通过后触发
onSubmit() {
console.log('submit', this.form);
},
// 验证不通过后触发
onFailed(errorInfo) {
console.log('error', errorInfo);
},
},
};
```
一个简单的表单提交页面就完成了
