当前位置：首页 > article >正文

vue-整合校验validator demo

article 2025/1/9 22:11:57

文章目录

前言
- vue-整合校验validator demo
- - 1. 源码
  - - 1.1. 测试工具类
    - 1.2. main.js 整合
  - 2. 测试
  - - 2.1. element-ui 中 el-form 表单验证的规则配置demo
    - 2.2. el-form 表单验证中的常见配置项
    - 2.3. 测试验证

前言

如果您觉得有用的话，记得给博主点个赞，评论，收藏一键三连啊，写作不易啊^ _ ^。
而且听说点赞的人每天的运气都不会太差，实在白嫖的话，那欢迎常来啊!!!

vue-整合校验validator demo

1. 源码

1.1. 测试工具类

src\utils\ValidateUtil.js



let validUsername = (rule, value, callback) => {
  const valid_map = ['admin', 'editor']
  const flag =  valid_map.indexOf(value.trim()) >= 0
  if (!flag) {
    callback(new Error('请输入正确的用户名'))
  } else {
    callback()
  }
}
let validatePassword = (rule, value, callback) => {
  if (value.length < 6) {
    callback(new Error('密码不能小于6位'))
  } else {
    callback()
  }
}
// 长度校验
let validLength = (rule, value, callback) => {
  let val = value
  // 数据长度校验
  let min = rule.min == null ? 0 : rule.min
  let max = rule.max
  val = val == null ? '' : val + ''
  val = rule.type == 'number' ? val = val.replace('.', '') : val
  let length = val.length
  // 检测
  if (length > max || length < min) {
    if (min === 0) {
      callback(new Error('最多可输入' + max + '个字符'))
    } else {
      callback(new Error('最多可输入' + min + '-' + max + '个字符'))
    }
  }
  if (rule.isCheck == null) {
    callback()
  }
}


const Validator = {
  // 长度校验 min: 1, max: 50, message: ''
  length () {
    return validLength
  },

  // 用户测试
  validUsername () {
    return validUsername
  },
  //密码测试
  validatePassword (){
    return validatePassword
  }
}
// 对Validator的实例重新封装成一个plugin ,方便 Vue.use(xxxx)
export default {
  install: function (Vue, Option) {
    Object.defineProperty(Vue.prototype, '$valid', { value: Validator })
  }
}

1.2. main.js 整合

在这里插入图片描述
源码:

import Vue from "vue";
import App from "./App.vue";
import config from "./config";
import router from "./router";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import valid from './utils/ValidateUtil'

Vue.config.productionTip = false;
Vue.use(valid) // 验证规则

console.log("Current Environment:", config.ENV);
console.log("API URL:", config.API_URL);
Vue.use(ElementUI);
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

主要代码:
import valid from ‘./utils/ValidateUtil’
Vue.use(valid) // 验证规则

2. 测试

2.1. element-ui 中 el-form 表单验证的规则配置demo

在这里插入图片描述
源码:

<template>
    <div class="login-container">
      <h1><i class="fas fa-sign-in-alt"></i>测试</h1>
      <el-form :model="loginForm" ref="loginForm" :rules="loginRules" label-width="80px">
        <el-form-item label="用户名" prop = 'username'>
          <el-input ref = "username" v-model="loginForm.username" placeholder="请输入" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password" ref="password" type="password" placeholder="请输入" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>

  export default {
    name: "Login",
    data() {

      return {
        loginForm: {
          username: "admin",
          password: "123456",
        },
        loginRules: {
            username: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                {validator: this.$valid.length(), min: 0, max: 50, trigger: ['blur', 'change']},
                {validator: this.$valid.validUsername(), type: 'numberLetterSign', trigger: ['blur', 'change']}
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                {validator: this.$valid.validatePassword(), type: 'numberLetterSign', trigger: ['blur', 'change']}
            ]
            
        }
      };
    },
    methods: {
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
        if (valid) {
          console.log('----------- submit!!')
          debugger;
          // 简单的登录逻辑
          if (this.loginForm.username === "admin" && this.loginForm.password === "123456") {
             // 模拟保存 token
             localStorage.setItem("token", "fake-token");
             this.$router.push("/home");
          } else {
             this.$message.error("用户名或密码错误！");
          }          
        } else {
          console.log('error submit!!')
        }
      })
       
           
      },
    },
  };
  </script>
  
  <style>
  .login-container {
    max-width: 300px;
    margin: 100px auto;
  }
  </style>

主要代码说明:

{ required: true, message: ‘请输入用户名’, trigger: ‘blur’ }

这个规则表示：
required: true：用户名字段是必填的。
message: ‘请输入用户名’：如果用户名为空（即未填写），会显示的错误信息。
trigger: ‘blur’：当表单字段失去焦点时触发验证。

{ validator: this.$valid.length(), min: 0, max: 50, trigger: [‘blur’, ‘change’] }

这个规则使用了自定义的验证器 this.$valid.length()：
validator：自定义验证函数。它会被调用并验证输入值是否合法。
min: 0, max: 50：这是 length 验证规则的额外配置，表明该字段的值长度必须在 0 到 50 之间。
trigger: [‘blur’, ‘change’]：当字段失去焦点 (blur) 或内容发生改变时 (change) 触发验证。

{ validator: this.$valid.validUsername(), type: ‘numberLetterSign’, trigger: [‘blur’, ‘change’] }

这个规则也是使用了自定义的验证器 this.$valid.validUsername()
validator：同样是一个自定义验证函数 validUsername，它会验证用户名是否符合特定规则。
type: ‘numberLetterSign’：这是你自定义验证的类型标识，可能用于在 validUsername 方法中检查用户名是否包含数字、字母和特殊字符等。
trigger: [‘blur’, ‘change’]：触发验证的时机是字段失去焦点或内容改变。