vue3+ element-plus+css：开展活动表单填写页面样式

已于 2024-03-10 23:08:39 修改
阅读量441 收藏 8
点赞数 6
文章标签： css vue.js elementui
于 2024-03-10 23:06:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mwngtaiqi/article/details/136611351
版权

正则表达式校验手机号：
1）当输入值变化时检测第二位是否为2，第一位是否不为1

2）手机号填写完成后，用正则表达式检验手机号格式

regex为正则表达式，^：字符串开始，1：第一位字符为“1”，[3-9]：3-9的任意一个数字，\d{9}：\d为数字，\d{9}表示9位任意数字，$字符串结束

使用test方法检查手机号是否满足regex正则表达式，如果手机号存在且不满足正则表达式，则给出相应提示；否则校验其它输入框信息是否填写正确

错误：


This comparison appears to be unintentional because the types 'string' and 'RegExp' have no overlap.

    表明你在尝试比较一个字符串类型（string）和一个正则表达式类型（RegExp），这是不合理的，因为这两种类型在JavaScript中没有交集。这意味着你不能直接将它们进行比较，因为比较运算符（如 == 或 ===）预期操作数应该是可以相互比较的类型。

正确写法：

完整示例：

<template>
  <el-form
    :model="ruleForm"
    ref="ruleFormRef"
    :rules="rules"
    label-width="auto"
    label-position="left"
    status-icon
    :size="formSize"
    style="
      max-width: 100%;
      background-color: #ffffff;
      padding: 2rem 0 0 3rem;
      right: 2.5%;
      width: 95%;
    "
    class="el_form"
  >
    <el-form-item label="活动名称" class="el_form-item" required prop="activityname">
      <el-input
        v-model="ruleForm.activityname"
        style="width: 90%"
        placeholder="请填写活动名称"
      />
    </el-form-item>
    <el-form-item label="负责人身份" required prop="identifier">
      <el-select
        v-model="ruleForm.identifier"
        placeholder="您的身份是"
        style="width: 90%"
      >
        <el-option label="老师" value="teacher" />
        <el-option label="管理员" value="management" />
      </el-select>
    </el-form-item>
    <el-form-item label="负责人姓名" required prop="name">
      <el-input
        v-model="ruleForm.name"
        placeholder="请填写负责人姓名"
        style="width: 90%"
      />
    </el-form-item>
    <el-form-item label="活动地点" required prop="region">
      <el-input
        v-model="ruleForm.region"
        style="width: 90%"
        placeholder="请填写活动地点"
      />
    </el-form-item>
    <el-form-item label="活动开始时间" required prop="beginDate">
      <el-date-picker
        v-model="ruleForm.beginDate"
        type="datetime"
        placeholder="请选择活动开始时间"
        format="YYYY-MM-DD HH:mm:ss"
        date-format="MMM DD, YYYY"
        time-format="HH:mm"
      />
    </el-form-item>
    <el-form-item label="活动结束时间" required prop="endData">
      <el-date-picker
        v-model="ruleForm.endData"
        type="datetime"
        placeholder="请选择活动结束时间"
        format="YYYY-MM-DD HH:mm:ss"
        date-format="MMM DD, YYYY"
        time-format="HH:mm"
      />
    </el-form-item>
    <!-- 正则表达式校验号码 -->
    <el-alert
      title="手机号必须从1开始"
      type="error"
      show-icon
      v-if="phone1"
      style="width: 90%"
    />
    <el-alert
      title="非法输入"
      type="error"
      show-icon
      v-if="phone2"
      style="width: 90%"
    />
    <el-form-item label="联系电话" required prop="phonenumber">
      <el-input
        v-model="ruleForm.phonenumber"
        style="width: 90%"
        maxlength="11"
        placeholder="请填写手机号"
        show-word-limit
        @input="inputNum"
        type="text"
      />
    </el-form-item>
    <el-form-item label="活动备注">
      <el-input
        v-model="ruleForm.desc"
        placeholder="需携带什么物品等"
        type="textarea"
        style="width: 90%"
      />
    </el-form-item>
    <el-form-item>
      <el-button
        @click="onSubmit(ruleFormRef)"
        style="width: 90%; background-color: #b4fdff"
        >提交</el-button
      >
    </el-form-item>
    <!-- <el-button style="width: 100%">复位</el-button> -->
  </el-form>
</template>
  <script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";

const phone1 = ref(false);
const phone2 = ref(false);
const formSize = ref("default");
interface RuleForm {
  activityname: string;
  identifier: string;
  name: String;
  region: string;
  beginDate: string;
  endData: string;
  phonenumber: string;
  desc: string;
}
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  activityname: "",
  identifier: "",
  name: "",
  region: "",
  beginDate: "",
  endData: "",
  phonenumber: "",
  desc: "",
});
const rules = reactive<FormRules<RuleForm>>({
  activityname: [
    { required: true, message: "请输入活动名字", trigger: "blur" },
  ],
  identifier: [
    {
      required: true,
      message: "请输入您的身份",
      trigger: "change",
    },
  ],
  name: [
    {
      required: true,
      message: "请输入您的名字",
      trigger: "change",
    },
  ],
  region: [
    {
      required: true,
      message: "请输入活动地点",
      trigger: "change",
    },
  ],
  beginDate: [
    {
      type: "date",
      required: true,
      message: "请输入活动开始时间",
      trigger: "change",
    },
  ],
  endData: [
    {
      type: "date",
      required: true,
      message: "请输入活动结束时间",
      trigger: "change",
    },
  ],
  phonenumber: [
    {
      required: true,
      message: "请输入您的联系电话",
      trigger: "change",
    },
  ],
});
const onSubmit = async (formEl: FormInstance | undefined) => {
  const regex = /^1[3-9]\d{9}$/;
  if (!regex.test(ruleForm.phonenumber) && (ruleForm.phonenumber)) {
    alert("请输入正确的手机号码");
  } else {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      console.log("提交表单", formEl);
      if (valid) {
        console.log("submit success!");
      } else {
        console.log("error submit!", fields);
      }
    });
  }
};
const inputNum = (e) => {
  console.log("校验手机号", e);
  // 如果检测到输入的第二位为非2数字^1[3-9]\d{9}$
  if (e[1] == 2) {
    //取出手机号e的第二位，判断是否为2
    console.log("非法输入");
    phone2.value = true;
  } else if (e[0] != 1 && e) {
    //判断手机号e长度是否不为0且第1位不为1
    console.log("必须从1开始");
    phone1.value = true;
  } else {
    phone1.value = false;
    phone2.value = false;
  }
};
</script>
  <style scoped>
.el-alert {
  margin: 20px 0 0;
}
.el-alert:first-child {
  margin: 0;
}
.el_form {
  display: flex;
  flex-direction: column; /* 子元素竖直排列 */
  /* align-items: center; 子元素在父元素中水平居中   */
  justify-content: space-between; /* 子元素之间的间距平均分布 */
  height: 100vh; /* 根据需要设置父元素的高度，这里设置为视口高度 */
  padding: 0 10%; /* 设置内边距，防止子元素过于靠近视口边缘 */
}
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
}
.line {
  width: 1px;
  background-color: var(--el-border-color);
}
</style>

注意：使用el-form前，需前往element-plus官网下载相关包：一个 Vue 3 UI 框架 | Element Plus

前端瓦达希
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
2022/09/02更新： 下边网友发现有新的方案：https://github.com/guolaopi/element-plus-table-dragable-demo 有上网条件的可以直接去github下载。 没有上网条件的可以在这里下载已经更新。 说明：本人前端小白不是什么骗子（我有4.5k多分没啥毛用），之前没有现成的组件就用Vuedraggable来实现，功能实现了但是不太友好。 =======以下是之前的说明===== 原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S vuedraggable@next
vue3项目配合element-plus和css实现主题切换，5分钟学会的小技能
06-09 2733
以--开头的属性，另外scss是以开头，less是以开头定义后通过var()使用变量在:root选择器中定义， 可以作用于全局文档中的所有元素。
element-plus学习笔记(一)
baidu_41388533的博客
10-18 3431
引入Element-plus(main.js) import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import 'element-plus/theme-chalk/display.css' app.use(ElementPlus) router-link 的下划线去除 a { text-decoration: none; } .router-link-active { text-decor
vue入门小案例（表单收集单页面）
最新发布
2301_76478257的博客
03-21 395
在Vue中创建一个表单收集页面
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios
vue3-element-plus-typescript：基于vue-cli vite + vue3.0 + element-plus + typescript +模拟数据的后台管理系统列表页增删改查功能
02-14
vue3-element-plus-typescript 基于vue-cli / vite + vue3.0 + element-plus +打字稿+ mock数据的后台管理系统列表页增删改查功能 vue-cli版： : vite版： : 系统模块数据是mock数据使用了Vue3.0全家桶，Element-plus和typescript，实践vue3.0的新特性以及vite打包工具，采用的是vue3.0的组成API，体验vue3和typescript以及打包工具vite等 页面功能 列表页 列表页增删改改查 采用vue3 composition api typescript在项目中运用，提供类型检查 模拟数据，支持网络查看 请求接口返回数据用typescript泛型约束 vue3-element-plus-typescript yarn install 编译和热重装以进行开发
【翻译】TypeScript: Documentation - The Basics
weixin_46136821的博客
05-08 2303
JavaScript中的每一个值都有一组可以通过运行不同的操作来观察的行为。这听起来很抽象，但是作为一个简单的例子，考虑一下我们可能对一个叫做message的变量运行的一些操作。如果我们不知道message的值-这是很常见的情况-我们无法可靠地说运行这段代码会得到什么结果.每个操作的行为完全取决于我们一开始拥有的值message当我们编写JavaScript时,这些问题的答案通常都在我们的脑海中,我们必须希望所有的细节都是正确的假设message如果运行第一行代码,会得到该字符串的小写形式。
字符串比较报错
nicole_001的专栏
03-27 446
http://topic.csdn.net/t/20010303/16/78434.html
29、枚举
imkaifan的博客
11-01 965
常数枚举与普通枚举的区别是，它会在编译阶段被删除，并且不能包含计算成员，如下编译后的代码可以看下（普通枚举编译后是一个自执行函数）
ts日常类型
weixin_45326220的博客
10-31 362
ts日常类型
【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式
热门推荐
weixin_57208584的博客
08-28 1万+
【前端】vue中使用element plus/ui的自定义全局变量样式，以及如何去修改做出自己的scss样式
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 、 JWT 、 Redis 、 Mybatis-Plus 、 Knife4j 等技术栈搭建的前后端分离开源权限管理系统。 在线预览地址：http://vue3.youlai.tech 开源仓库地址：https://gitee.com/youlaiorg/vue3-element-admin 后端仓库地址：https://gitee.com/youlaiorg/youlai-boot
vue3-element-admin-ts::party_popper: 基于 vite + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus+Typescript 的后台管理系统vue3-element-admin-ts
04-07
vue3-element-admin :party_popper: 基于 vite + vue3 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统 简介 是一个后台前端解决方案，它基于 和 实现。它使用了最新的前端技术栈，vite + vue3 + typescript ，提供最基础的框架模型，可以帮助你快速搭建企业级中后台产品原型。 PS：我是参考 开发维护的 ， 十分感谢大佬对开源社区做出的贡献 :) 前序准备 你需要在本地安装 和 。本项目技术栈基于 、、、 、 、axios 和 element-plus，提前了解和学习这些知识会对使用本项目有很大的帮助。 开发 # 克隆项目 git clone https://github.com/au1996/vue3-element-admin-ts.git # 进入项目目录 cd v
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
vue3导入element-plus的index.css路径问题
weixin_45990436的博客
09-30 4106
在做vue3项目的过程中，使用了element-plus这个开源组件库，在引入index.css这个样式的时候出现了一个问题，使用了之前的 import 'element-plus/lib/theme-chalk/index.css' 导入时路径发现错误，查阅了文档后发现是官方将路径进行了更改，现路径为 'element-plus/dist/index.css'，但是我载导入时路径没有提示，以为是index.css不在该路径下，饶了一圈才发现问题，导入后生效，在此记录一下 ...
ElementPlus 完整引入与按需引入
weixin_49809163的博客
01-19 1万+
ElementPlus 的引入方式：完整引入和按需引入
vue表单
weixin_52629158的博客
05-20 32
3、 当某一个复选框，选中内容的时候 v-model 会将当前的 value值 ，并且同时改变 data数据中心 中的 数据。3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据。2、 每一个单选框必须要有value属性 且value 值不能一样。2、 每一个复选框必须要有value属性 且value 值不能一样。1、 两个单选框需要同时通过v-model 双向绑定 一个值。1.1.1表单基本操作。
elementui中关于图片添加必填*
qq_37263478的博客
06-29 1623
嘿嘿。。我直接用插槽slot手写一个*
【vue界面设计背景以及表单透明样式的灵活运用】
qq_53795917的博客
07-20 1187
主要就是讲解背景设置和表单透明样式的简单设计和相关属性的灵活运用
vue3+element-plus 表单验证
04-27
在 Vue3 中使用 Element Plus 进行表单验证可以按照以下步骤进行： 1. 安装 Element Plus 和 VeeValidate ``` npm install element-plus vee-validate@next ``` 2. 在 main.js 中引入 Element Plus 和 VeeValidate ```js import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import { defineRule, ErrorMessage, configure } from 'vee-validate' import { required, min, max, email } from '@vee-validate/rules' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) // 注册 VeeValidate 规则 defineRule('required', required) defineRule('min', min) defineRule('max', max) defineRule('email', email) // 配置 VeeValidate configure({ generateMessage: ({ field, rule }) => { const messages = { required: `${field}不能为空`, min: `${field}至少为${rule.params.min}个字符`, max: `${field}不能超过${rule.params.max}个字符`, email: `${field}必须是有效的邮箱地址` } return messages[rule.name] || `${field}无效` } }) app.component('ErrorMessage', ErrorMessage) app.mount('#app') ``` 3. 在组件中使用 VeeValidate ```html <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> <error-message name="username"></error-message> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> <error-message name="password"></error-message> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { defineComponent } from 'vue' import { useVeeValidate } from '@vee-validate/vue3' export default defineComponent({ setup() { const { handleSubmit, resetForm, errors, setErrors } = useVeeValidate() const form = { username: '', password: '' } const rules = { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 6, max: 16, message: '用户名长度在 6 到 16 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 16, message: '密码长度在 6 到 16 个字符', trigger: 'blur' } ] } const submitForm = handleSubmit(async () => { // 提交表单逻辑 }) return { form, rules, submitForm, resetForm, errors, setErrors } } }) </script> ``` 在这个例子中，我们使用了 `useVeeValidate()` hook 来管理表单验证，定义了一个 `form` 对象来存储表单数据，定义了 `rules` 对象来定义表单验证规则，使用了 `handleSubmit()` 方法来触发表单提交逻辑，并且使用了 `ErrorMessage` 组件来展示错误信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值