vue3笔记

weixin_51683916

已于 2024-02-20 18:41:30 修改

阅读量326

点赞数 2

文章标签：笔记 vue.js javascript

于 2024-02-20 17:57:57 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_51683916/article/details/136194217

版权

格式规范

仓库 stores 命名格式 use名Store 例：(useUserStore)

el-col

el-col 表示列(24份)

（1）:span="12" 代表在一行中，占12份（50%）

（2）:span="6" 代表在一行中，占6份（25%）

（3）:offset="12" 代表在一行中，左侧margin份数

<el-row>
    <el-col :span="12"></el-col>
    <el-col :span="6" :offset="3">
</el-row>

el-form

el-form 代表整个表单

el-form-item 表单的一行

el-input 表单元素（输入框）

:prefix-icon="图标"

<el-form>
  <el-form-item>
    <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
  </el-form-item>
</el-form>

表单校验

（1）el-form => :model="ruleForm" 绑定的整个form的数据对象{xxx，xxx，xxx}

（2）el-form => :rules="rules" 绑定的整个rules规则对象{xxx，xxx，xxx}

（3）表单元素 => v-model="ruleForm.xxx" 给表单元素，绑定form的子属性

（4）el-form-item => prop配置生效的是哪个校验规则（和rules中的字段要对应）

<script setup>
  //整个的用于提交·的form对象
  const formModel = ref({
    username: '',
    password:'',
    repassword:''
  })
  //整个表单的校验规则
  //1.非空校验 required: true, message消息提示，trigger触发校验的时机: blur(失焦触发) change(更   改值触发)
  //2，长度校验 min: xx,max: xx
  //3.正则校验 pattern：正则规则  \S 非空
  //4.自定义校验（自己定义校验格式）
  //  validator: (rule, value, callback)
  //  (1) rule   当前校验规则相关的信息
  //  (2) value  所校验的表单元素目前的表单值
  //  (3) callback 无论成功还是失败，都需要callback回调
  //    - callback（） 校验成功
  //    - callback（new Error（错误信息）） 校验失败
  const rules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 5, max: 10, message: '用户名必须是5-10位的字符', trigger: 'blur' }
    ],
    const rules = {
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        {
          pattern: /^\S{6,15}$/,
          message: '密码必须是6-15位的非空字符',
          trigger: 'blur'
        }
    ],
    repassword: [
      { required: true, message: '请再次输入密码', trigger: 'blur' },
      {
        pattern: /^\S{6,15}$/,
        message: '密码必须是6-15的非空字符',
        trigger: 'blur'
      },
      {
        validator: (rule, value, callback) => {
          if (value !== formModel.value.password) {
            callback(new Error('两次输入密码不一致!'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ]
  }
<script>
<template>
  <el-form :model="formModel" :rules="rules">
    <el-form-item prop="username">
      <el-input
        v-model="formModel.username"
        :prefix-icon="User"
        placeholder="请输入用户名"
      ></el-input>
    </el-form-item>
  <el-form>
//(其他两个也要绑定)
</template>