> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/qian-duan-cao-zuo/shi-li-lian-xi/dong-tai-sou-suo-wang-ye/hou-duan/vue-mo-ban/01main.vue.md).
# main.vue
## 对form表单进行验证
```javascript
```
1. 首先form表单有三个属性
* model 绑定的数据
* rules 使用的验证规则
* ref 表单的名字
2. 在`el-form-item`单个字段中进行验证
* prop声明需要验证的字段
3. 提交按钮
* 在验证函数中传入表单的名字,也就是`ref`所定义的字符串
### 在data中定义规则和验证函数
* 这里记得验证成功后要调用回调函数`callback()`
```javascript
var checKeyword=(rule,value,callback)=>{
if(!value){
return callback(new Error("搜索内容不能为空"))
}else{
callback()
}
};
return {
input:{
keyword:'',
rule:'false'
},
rules:{
keyword:[{validator:checKeyword,trigger:'blur'}],
},
}
```
### 绑定点击事件的函数
```javascript
methods: {
onSubmit(ruleform){
this.$refs[ruleform].validate((valid) => {
if (valid) {
console.log("dsadas")
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
},
```
### 发起http请求
1. 服务端解决跨域请求
在进入路由之前进行配置
```javascript
app.all("*",function(req,rep,next){
rep.header("Access-Control-Allow-Origin", "*");
rep.header("Access-Control-Allow-Headers", "*");
next();
})
```
2. 前端进行post请求
```javascript
Vue.use(vueResourve)
this.$http.post(httpUrl+"/",formData,{emulateJSON: true}).then((reponse)=>{
console.log(reponse)
})
```
## 参考
1. axiso 包
2. this指针
3. bodyParse解析post数据
4. 四种post请求