这次给大家带来如何实现能被配置登录表单，实现能被配置登录表单的注意事项有哪些，下面就是实战案例，一起来看一下。
业务场景
在之前，项目只支持手机号+密码登录，前端是直接把表单写死的，后来有客户希望能支持验证码登录，有的客户还希望能有手机号+验证码+密码的登录方式…所以登录方式的灵活性需要可配置的表单支持，于是我把登录组件做了拆分。
以表单元素为粒度，分离出了手机号、密码、短信验证码这几个组件，它们内部都有自己的表单验证方法，通过组合可以快速完成登录、注册、找回密码等表单组件。高内聚低耦合、高内聚低耦合…跟着念十遍~
.├ common├ captcha.vue| ├ password.vue| └ phone.vue├ login| └ index.vue├ register| └ index.vue└ resetPassword └ index.vue
登录后复制
这里我们将login作为父组件，读取服务端返回的登录配置并在模板做条件渲染，登录时调用子组件内部的表单验证，最后通过Vuex拿到数据调用接口。整个可配置登录表单的逻辑就是酱子，接下来上代码。
代码
请求服务端配置数据：
/* 参数说明： * 'password': 密码登录 * 'captcha': 短信验证码登录 * 'password_or_captcha': 密码或短信登录 * 'password_with_captcha': 密码+短信登录 */config: { login_methods: 'password'}
登录后复制
登录组件的核心渲染代码（pug）：
.login-card .login-header h3 登录 .login-content phone(ref="phone") password( v-if="isPasswordMode" ref="password" ) captcha( v-if="isCaptchaMode" ref="captcha" ) template(v-if="isPasswordWithCaptchaMode") captcha(ref="captcha") password(ref="password") template(v-if="isPasswordOrCaptchaMode") ... el-button(@click="login") 登录
登录后复制
登录时需要三个步骤：表单验证、组装数据、调用接口：
async login () { if (!this.validate()) return const loginData = this.getLoginData() await this.postLogin(loginData) ...}
登录后复制
登录的表单验证其实是对当前登录方式中所有组件的 validate() 方法进行逻辑判断：
validate () { const phone = this.$refs.phone.validate() let isPass = false if (this.isPasswordMode) { if (this.$refs.password) isPass = this.$refs.password.validate() } if (this.isCaptchaMode) { if (this.$refs.captcha) isPass = this.$refs.captcha.validate() } if (this.isPasswordWithCaptchaMode) ... if (this.isPasswordOrCaptchaMode) ... isPass = phone && isPass return isPass}
登录后复制
每个子组件都是一个完整的表单，验证也由自己完成，password组件模板：
.login-password el-form( :model="form" :rules="rules" ref="form" @submit.native.prevent="" ) el-form-item(prop="password") el-input( v-model="form.password" type="password" name="password" )
登录后复制
W3C: When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
需要注意，根据 W3C标准 ， 当一个form元素中只有一个输入框时，在该输入框中按下回车会自动提交表单。通过在 添加 @submit.native.prevent 可以阻止这一默认行为。
password组件的表单验证：
validate () { let res = false this.$refs.form.validate((valid) => { res = valid }) return res}
登录后复制
最后从Vuex里拿到所有表单数据，进行组装：
computed: { ...mapState('login', { phone: state => state.phone, password: state => state.password, captcha: state => state.captcha }), },methods: { ... getLoginData () { let mode = '' const phone = this.phone ... const data = { phone } if (this.isPasswordMode) { mode = 'password' data.password = password } if (this.isCaptchaMode) { mode = 'captcha' data.captcha = captcha } if (this.isPasswordWithCaptchaMode) ... if (this.isPasswordOrCaptchaMode) ... data.mode = mode return data }}
登录后复制
补充：
vue.js 全选与取消全选的实例代码
new Vue({ el: '#app', data: { checked: false, checkedNames: [], checkedArr: ["Runoob", "Taobao", "Google"] }, methods: { changeAllChecked: function() { if (this.checked) { this.checkedNames = this.checkedArr } else { this.checkedNames = [] } } }, watch: { "checkedNames": function() { if (this.checkedNames.length == this.checkedArr.length) { this.checked = true } else { this.checked = false } } }})
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Npm run build如何打包不同域名
Koa2做出文件上传下载功能
以上就是如何实现能被配置登录表单的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2765226.html
