表单是后台项目业务中的常用组件,这次重构了登录功能以满足登录方式可配置的需求,在此记录和分享一下。
业务场景
在之前,项目只支持手机号+密码登录,前端是直接把表单写死的,后来有客户希望能支持验证码登录,有的客户还希望能有手机号+验证码+密码的登录方式…所以登录方式的灵活性需要可配置的表单支持,于是我把登录组件做了拆分。
以表单元素为粒度,分离出了手机号、密码、短信验证码这几个组件,它们内部都有自己的表单验证方法,通过组合可以快速完成登录、注册、找回密码等表单组件。高内聚低耦合、高内聚低耦合…跟着念十遍~
这里我们将login作为父组件,读取服务端返回的登录配置并在模板做条件渲染,登录时调用子组件内部的表单验证,最后通过Vuex拿到数据调用接口。整个可配置登录表单的逻辑就是酱子,接下来上代码。
代码
请求服务端配置数据:
.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") 登录
登录的表单验证其实是对当前登录方式中所有组件的 validate() 方法进行逻辑判断:
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组件模板:
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元素中只有一个输入框时,在该输入框中按下回车会自动提交表单。通过在
password组件的表单验证:
最后从Vuex里拿到所有表单数据,进行组装:
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 全选与取消全选的实例代码