vue3如何优雅的实现移动端登录注册模块

目录

• 前言
• 输入框组件

• 布局
• v-model

• rules设计
• Form表单
• 子组件生成校验函数
• 校验

<template>
 <div class="input">
  <!--左侧,lt是左侧内容-->
   <span class="left-text">
   {{ lt }}
   </span>
  <!--中间-->
  <input class="content" v-bind="$attrs" :value="value" @input="onChange" /> 
  <!--右侧,rt判端是验证码还是叉叉图标-->
   <div v-if="rt == 'timer'" class="right-section">
    {{ timerData.content }} <!--可能是'验证码',也可能是倒计时 -->
   </div>
   <div
   v-else-if="rt == 'close'"
   class="right-section"
   >
   <van-icon name="close" /> <!--叉叉图标-->
   </div>
 </div> 
</template>

 <InputForm
  lt="+86" <!--左侧显示+86--> 
  rt="close" <!--右侧显示叉叉图标-->
  placeholder="请输入手机号码"
 />

 const form_data = reactive({
  number_number: '', //用户名
  password: '', //密码
  ppassword: '', //重复密码
  captcha: '', //验证码
 })

 <InputForm
    lt="+86"  <!--左侧显示+86--> 
    rt="close" <!--右侧显示叉叉图标-->
    placeholder="请输入手机号码"
    v-model:value="form_data.password"
 />

<template>
  <div class="input">
    ...
      <input class="content" v-bind="$attrs" :value="value" @input="onChange" /> 
    ...
  </div> 
</template>
export default defineComponent({
 props: {
  lt:String,
  rt: String,
  value: String
 },
 setup(props, context) {
  const onChange = (e:KeyboardEvent) => {
   const value = (e.target as HTMLInputElement).value;
    context.emit("update:value",value);
  };
  return {
    onChange
  }
 }
 })

 <Form ref="form" :rules="rules">
   <InputForm
    lt="+86"
    rt="close"
    v-model:value="form_data.number_number"
    placeholder="请输入手机号码"
    propName="number_number"
   />
   <InputForm
    rt="timer"
    v-model:value="form_data.captcha"
    placeholder="请输入手机验证码"
    propName="captcha"
   />
   <InputForm
    rt="close"
    v-model:value="form_data.password"
    placeholder="请输入密码"
    type="password"
    propName="password"
   />
   <InputForm
    rt="close"
    v-model:value="form_data.ppassword"
    placeholder="请输入确认密码"
    type="password"
    propName="ppassword"
   />
   <Button text="注 册" @sub="onSubmmit" /> <!--注册按钮-->
  </Form>

export default defineComponent({
 components: {
  InputForm, //输入框
  Button, //注册按钮
  Form, //Form组件
 },
 setup(props) {
  const form_data = ...; //省略
  const rules = ...;
  //获取最外层Form组件的实例
  const form = ref(null);
  const onSubmmit = ()=>{
   if (!form.value || !form.value.validate()) {
     return false;
   }
   //校验通过了,可以请求注册接口了
  }
  return {
   form,
   rules,
   onSubmmit,
   form_data
  };
 },
});

const rules = {
   number_number:[{
        type: 'required',
        msg:"请输入正确的手机号" 
      }
        "phone"
      ],
   captcha:[
    {
     type: 'required',
     msg: '验证码不能为空'
    }
   ],
   password: [
    {
     type: 'required',
     msg: '请输入密码',
    },
    {
     type: 'minLength',
     params: 6,
     msg: '密码长度不能小于6位',
    },
   ],
   ppassword:[
    {
     type: 'custome',
     callback() {
      if (form_data.password !== form_data.ppassword) {
       return {
        flag: false,
        msg: '两次输入的密码不一致',
       };
      }
      return {
       flag: true,
      };
     },
    },
   ]
  }

 {
  type, // 类型
  msg, //自定义的错误信息
  params, //传过来的参数值 比如 {type:'minLength',params:6},值最小长度不能低于6位
  callback //自定义校验函数
 }

<!-- 表单组件 -->
<template>
 <div class="form">
  <slot></slot>
 </div>
</template>
<script lang="ts">
import { ref, provide } from "vue";
export default defineComponent({
 name: "Form",
 props:{
  rules:Object
 },
 setup(props) {
  ...//省略
  provide("rules",props.rules); // 将校验规则分发下去
  const validate = ()=>{
   //向外暴露的校验函数
  }
  return {
   validate
  } 
 }
 }) 
</script>  

import { inject，onMounted } from "vue";
...
setup(props, context) {
 const rules = inject("rules");
 const rule = rules[props.propName];// 通过propName拿到校验规则
 const useValidate = () => {
      const validateFn = getValidate(rule); // 获取校验函数
      const execValidate = () => { 
        return validateFn(props.value); //执行校验函数并返回校验结果    
      };
      onMounted(() => {
        const Listener = inject('collectValidate');
        if (Listener) {
         Listener(execValidate);
        }
      });  
 };
 useValidate(); //初始化校验逻辑
 ...
}

{
  captcha:[{
   type: 'required',
   msg: '验证码不能为空'
  }],
  password:[{
   type: 'required',
   msg: '请输入密码', 
  }]
}

setup(props) {
const list = ref([]);//定义一个数组
const listener = (fn) => {
 list.value.push(fn);
};
provide("collectValidate", listener); //将监听函数分发下去
//验证函数
const validate = (propName) => {
  const array = list.value.map((fn) => {
    return fn();
  });
  const one = array.find((item) => {
    return item.flag === false;
  });
  if (one && one.msg) {
    //验证不通过
    Alert(one.msg);//弹出错误提示
    return false;
  } else {
    return true;
  }
};
...

class Validate {
 constructor() {}
 required(data) { //校验是否为必填  
  const msg = '该信息为必填项'; //默认错误信息
  if (data == null || (typeof data === 'string' && data.trim() === '')) {
   return {
    flag:false,
    msg
   }
  }
  return {
    flag:true
  }
 }
 //校验是否为手机号
 phone(data) { 
  const msg = '请填写正确的手机号码'; //默认错误信息
  const flag = /^1[3456789]\d{9}$/.test(data);
  return {
   msg,
   flag
  }
 }
 //校验数据的最小长度
 minLength(data, { params }) {
    let minLength = params; //最小为几位
    if (data == null) {
     return {
      flag:false,
      msg:"数据不能为空"
     }
    }
    if (data.trim().length >= minLength) {
     return {flag:true};
    } else {
     return {
      flag:false,
      msg:`数据最小长度不能小于${minLength}位`
     }
    } 
  }
}

 const getInstance = (function(){
  let _instance;
  return function(){
     if(_instance == null){
      _instance = new Validate();
     }
     return _instance;
   }
 })()

/**
 * 生成校验函数
 */
export const getValidate = (rule) => {
  const ob = getInstance();//获取 Validate类 实例对象
  const fn_list = []; //将所有的验证函数收集起来
  //遍历rule数组,根据其类型获取Validate类中的校验方法放到fn_list中收集起来
  rule.forEach((item) => {
   if (typeof item === 'string') { // 字符串类型 
    fn_list.push({
     fn: ob[item], 
    });
   } else if (isRuleType(item)) { // 对象类型
    fn_list.push({
     //如果item.type为custome自定义类型,校验函数直接使用callback.否则从ob实例获取 
     ...item, 
     fn: item.type === 'custome' ? item.callback : ob[item.type],
    });
   }
  });
  //需要返回的校验函数
  const execuate = (value) => {
   let flag = true,
    msg = '';
   for (let i = 0; i < fn_list.length; i++) {
    const item = fn_list[i];
    const result = item.fn.apply(ob, [value, item]);//item.fn对应着Validate类定义的的校验方法
    if (!result.flag) {
     //验证没有通过
     flag = false;
     msg = item.msg ? item.msg : result.msg;//是使用默认的报错信息还是用户自定义信息 
     break;
    }
   }
   return {
    flag,
    msg,
   };
  };
  return execuate;
};

 [
  {
   type: 'required',
   msg: "请输入电话号码"
  },
  "phone"
 ]