登陆表单验证的一个小案例

1 创建一个对象，存放需要验证的内容以及正则规则

 let obj = {
        phone: {
          // 验证数据：用户输入的手机号
          value: this.userInfo.phone,
          // 验证格式  安装插件any-rule @zz
          regExp: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
          // 验证不通过，提示信息 toast
          errmsg: '手机号码格式不正确',
        },
        // 密码强度验证
        password: {
          // 验证数据：用户输入的密码
          value: this.userInfo.password,
          // 验证格式  安装插件any-rule @zz
          regExp: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]/,
          // 验证不通过，提示信息 toast
          errmsg: '密码格式不正确',
        },
      }

2 验证表单的逻辑

import { Toast } from 'vant';
Vue.use(Toast);
import Vue from 'vue';

class ValidForm {
    // 验证表单
    valid(obj) {
        // 遍历对象
        for (let key in obj) {
            // 验证正则  正则规则.test(value) 通过true,否false
            if (!obj[key].regExp.test(obj[key].value)) {
                // 表单验证不通过
                Toast(obj[key].errmsg);
                return false;
            }
        }
        // 表单验证通过
        return true;
    }
}

// 实例化对象，并共享实例
export const validForm = new ValidForm();

3  导入表单验证脚本

import { validForm } from '../assets/js/validForm.js'

4  调用表单验证的方法

let isPass = validForm.valid(obj)