526互联

Element Ui 的表单验证

发布时间 2024-01-09 18:12:43作者: PKGAME

一、简介

二、过程

三、问题

 

一、简介

　　element ui基于 Vue 3，面向设计师和开发者的组件库，很好用

　　本文介绍有关表单验证的相关的内容。

　　参考至： 去看看

二、过程

　　1.使用

　　1.1 在form 里面加上rule

   <el-form ref="loginForm" :model="loginData" :rules="loginRules" class="login-form">
          <h3 class="title">后台管理系统</h3>
          <el-form-item prop="account">
            <el-input v-model="loginData.account"
                      auto-complete="false"
                      placeholder="账号"
                      type="text">
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginData.password"
                      auto-complete="false"
                      placeholder="密码"
                      type="password">
            </el-input>
          </el-form-item>
          <el-form-item v-if="captchaOnOff" prop="code">
            <el-input v-model="loginData.code"
                      auto-complete="false"
                      placeholder="验证码"
                      style="width: 63%">
            </el-input>
            <div class="login-code">
              <img @click="get_img_code" :src="imgBase64" class="login-code-img"/>
            </div>
          </el-form-item>
          
          <el-checkbox v-model="loginData.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
          <el-form-item style="width:100%;">
            <el-button :loading="loading" size="default" style="width:100%;" type="primary" @click="tab_login">
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
            <div v-if="register" style="float: right;">
              <router-link :to="'/register'" class="link-type">立即注册</router-link>
            </div>
          </el-form-item>
        </el-form>

　　1.2 在js里面绑定规则

<script setup>
    import {reactive, ref} from 'vue'
    
    const loginForm = ref()
    const loginData = reactive({
        account: "",
        password: "",
        rememberMe: false,
        code: ""
      })
      
    const loginRules = reactive({
        account: [
            {required: true, message: '用户名不能为空', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        password:[
            {required: true, message: '密码不能为空',trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        code:[
            {required: true, message: '验证码不能为空', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
      })    
</script>

　　1.3 在js里面动态验证

　　　　err 会返回不符合的列表。

    loginForm.value.validate().then((check)=>{
          //  check = true
            console.log('验证成功')
        }).catch((err)=>{
            console.log('验证失败', err)
        })

　　2. 验证相关内容

　　2.1 trigger

　　　　"change"、"blur"和"submit"。当trigger的值为"change"时，表单会在输入框的值发生改变时立即触发校验。当trigger的值为"blur"时，表单会在输入框失去焦点时触发校验。当trigger的值为"submit"时，表单会在提交表单时触发校验。

　　2.2 其他相关参数

　　2.2.1  type：  用于验证数据类型   字符串类型

  • string: 字符串类型（默认值）
  • number: 数字类型
  • boolean:布尔类型
  • method: 函数类型
  • regexp:正则表达式
  • integer: 整型
  • float: 双精度浮点型数字
  • array: 数组类型
  • object: 对象类型
  • enum: 枚举值
  • date: 日期格式
  • url: 网址格式
  • hex: 16进制数字
  • email: 电子邮箱格式
  • any: 任意类型

　　2.2.2  required boolean 是否必填

　　　　如果在 el-form-item 里面加上 label 再这个属性为true 会有红色必填星号

　　2.2.3  pattern regexp/string 字段值匹配正则表达式才能通过验证

{ type : "string" , required: true , pattern : /^[a-z]+$/ }

　　2.2.4 min和max number 对于字符串和数组类型，将根据长度进行比较，对于数字类型，数字不得小于min，也不得大于max

{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }

　　2.2.5  len number 对于字符串和数组类型，对length属性执行比较，对于数字类型，此属性指示数字的完全匹配，len属性与min和max属性组合，则len优先。

{ type: "array", required: true, len: 11}

　　2.2.6 enum array type必须设置为enum，值必须包含在从可能值列表中才能通过验证

{type: "enum", enum: ['admin', 'user', 'guest']}

　　2.2.7 whitespace boolean type必须设置为string，要为仅包含空格的字符串可以将whitespace设置为true

{type: "string",message: '只存在空格',whitespace:true,trigger: ['change', 'blur']}

　　2.2.8 transform function 在验证之前转换值

 {type: 'enum',enum: [2,4,6], message: `结果不存在`, trigger: ['change', 'blur'],transform(value) {return Number(value * 2)}}

　　2.2.9 defaultField array/object type为数组或对象类型时一起使用，用来验证数组或对象中包含的所有值，进行深层验证

　　　　fields object type为数组或对象类型时一起使用，分别验证array/object类型的数据中的值，实现深度验证

 {
    type: "object", required: true,
    fields: {
      street: {type: "string", required: true},
      city: {type: "string", required: true},
      zip: {type: "string", required: true, len: 8, message: "invalid zip"}
    }
 roles: {
    type: "array", required: true, len: 3,
    fields: {
      0: {type: "string", required: true},
      1: {type: "string", required: true},
      2: {type: "string", required: true}
    }
  }

　　2.2.10  validator：可以为指定字段自定义验证函数——这就相当于把前边配置的东西用js按照以前的方式编写验证逻辑了。虽然麻烦点，但是能实现比较复杂的业务逻辑判断。

　　　　第一种方式

{
    validator(rule, value, callback) {
      return value === 'test';
    },
    message: 'Value is not equal to "test".',
  }

　　　　第二种方式

const checkAge = (rule, value, callback) => {
        if(!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if(!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if(value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };

　　　　在rule 加入

{
type: 'number',
required: true,
validator: checkAge,
trigger: ['blur', 'change']
}

　　2.2.11 messages未通过校验的提示信息：根据需要将消息分配给规则

 

三、问题