elementui的el-form的失焦blur
时间: 2024-05-21 19:11:52 浏览: 10
事件怎么绑定?
可以使用@blur绑定失焦事件,例如:
<template>
<el-form ref="form" @blur="handleBlur">
<!-- 表单内容 -->
</el-form>
</template>
<script>
export default {
methods: {
handleBlur() {
console.log('失焦事件触发')
}
}
}
</script>
相关问题
vue+elementui的el-form+axios的api接口怎么配合使用
可以先在el-form的submit方法中使用axios发送请求,具体的方法如下:
在template中:
```
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
```
在script中:
```
import axios from 'axios';
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
};
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
axios.post('/api/login', this.form).then(response => {
if (response.data.code === 200) {
// 登录成功,跳转到首页
this.$router.push('/home');
} else {
this.$message.error('登录失败');
}
});
} else {
return false;
}
});
},
resetForm() {
this.$refs.form.resetFields();
}
}
};
```
在上述代码中,我们先引入了axios,使用axios发送POST请求到后台的/api/login接口,参数为表单中的form数据。如果接口返回的状态码为200,说明登录成功,此时可以跳转到首页。如果接口返回的状态码不为200,说明登录失败,此时可以给用户提示登录失败信息。
至此,vue和element-ui的form组件与axios的api接口就配合使用成功了。
el-form的必填项
根据提供的引用内容可以得出以下结论:
引用中的代码展示了一个el-form的表单结构,其中的必填项通过rules属性进行验证。具体来说,fIncomeWay和fOppositeBank是必填项,分别对应的规则为:
fIncomeWay的规则为:[{ required: true, message: "请选择来款方式", trigger: ["blur", "change"] }]
fOppositeBank的规则为:[{ required: true, message: "请输入来款银行", trigger: "blur" }]
引用中的代码展示了另一个el-form的表单结构,其中的mobilePhone和email是必填项,分别对应的规则为:
mobilePhone的规则为:[{ required: true, message: '请输入手机号码', trigger: 'blur' }, { validator: checkMobile, max: 11, message: '请输入正确的格式', trigger: 'blur' }]
email的规则为:[{ required: true, message: '请输入电子邮箱', trigger: 'blur' }, { validator: checkEmail, max: 11, message: '请输入正确的格式', trigger: 'blur' }]
根据引用中的介绍,el-form的必填项可以通过设置相应的rules属性中的required为true来实现。以上就是el-form的必填项的相关信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Element el-form根据选择条件动态控制表单必填项](https://blog.csdn.net/zhouqionger/article/details/106576030)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [ElementUI:关于 el-form 必填项的校验规则](https://blog.csdn.net/weixin_43900414/article/details/107670469)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue elementui el-form rules动态验证的实例代码详解](https://download.csdn.net/download/weixin_38670297/12941851)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)