Vue.js实现可配置登录表单代码的详细说明

表单是后台项目业务中的一个常见组件。这一次，重新构建了登录功能，以满足可配置登录模式的要求。请在此记录并分享。

业务场景

之前项目只支持用手机号和密码登录，前端直接把表格写死。后来有客户希望支持带验证码登录，也有客户希望有带手机号和验证码的登录方式……所以登录方式的灵活性需要可配置的表单支持，所以我拆分了登录组件。

根据表单元素的粒度，将手机号码、密码、短信验证码等几个组件分开。他们都有自己的表单验证方法，可以快速完成登录、注册、密码检索等表单组件。高内聚低耦合，高内聚低耦合…读十遍~。常见的验证码| 密码| 手机登录| 索引. vue 注册| 索引. vue 重置密码整个可配置登录表单的逻辑是酱，然后编码。

密码

请求服务器配置数据：

/*参数描述：* 'password':密码登录* 'captcha':短信验证码登录* 'password_or_captcha':密码或短信登录* 'password_with_captcha':密码短信登录*/config3360 {login _ methods 3360 '密码。登录卡。登录-标题h3登录。login-content phone (ref=' phone ')密码(v-if=' ispassword mode ' ref=' password ' password ')captcha(v-if=' isCaptchaMode ' ref=' captcha ')模板(v-if=' ispassword with captchamode ')captcha(ref=' captcha ')密码(ref=' password ')模板(v-if=' ispasswordorcaptchamode ').El-button (@ click=' login ')登录需要三个步骤：表单验证、数据组装和调用接口：

异步登录(){ if(！这个。validate())返回const logindata=this。getlogindata()等待此消息。登录后(登录数据).}登录的表单验证实际上是对当前登录模式下所有组件的validate()方法的逻辑判断：

validate () { const phone=this。$refs.phone.validate()让isPass=false if(this . ispassword mode){ if(this。$refs.password) isPass=this。$ refs . password . validate()} if(this . iscaptchamode){ if(this。$refs.captcha) isPass=this。$ refs . captcha . validate()} If(this。ispasswordwithcaptchamode).如果(这个。ispasswordorcaptchamode).is pass=phone is pass return is pass }每个子组件都是一个完整的表单，验证是自己完成的。密码组件模板：log in-password El-form(: model=' form ' : rules=' rules ' ref=' form ' @ submit . native . protect=' ')El-form-item(prop=' password ')El-input(v-model=' form . password ' type=' password ' name=' password ')W3C :当表单中只有一个单行文本输入字段时，用户代理应在该字段中接受Enter作为提交表单的请求。

需要注意的是，根据W3C标准，当一个表单元素中只有一个输入框时，在输入框中按Enter会自动提交表单。您可以通过向el-form添加@submit.native.prevent来防止这种默认行为。

密码组件的表单验证：

Validate () {let res=false this。$ refs . form . validate((valid)={ RES=valid })return RES }最后，从Vuex获取所有表单数据并组装：

computed: {.mapState('login '，{ phone: state=state.phone，password : state=state。密码，验证码：状态=状态。captcha })，}，methods: {.getLoginData(){ let mode=' const phone=this。电话.const data={ phone } if(这。ispassword mode){ mode=' password '数据。password=password }如果(这。iscaptchamode){ mode=' captcha '数据。验证码=验证码}如果(这。ispassword witchcaptchamode).如果(这个。ispasswordorcaptchamode).data.mode=模式返回数据}}补充：

vue.js全选与取消全选的实例代码

new Vue({ El : ' # app }，data: { checked: false，checked name 3360[]，checkedArr: ['Runoob '，'淘宝'，' Google'])，methods : { changeallchecked : function(){ if(this。选中){这个。选中的名称=这个。选中了arr } else { this。已检查姓名=[]} } }，手表33: { '已检查姓名' 3360