2. 实现验证的功能

1. 正则表达式：

我们需要为不同的输入表单（用户名、密码、邮箱、手机号）定义一些不同的正则规则：

// 正则规则
let regName = /^[a-zA-Z0-9]{3,9}$/;
let regPassword = /^[a-zA-Z0-9|!|?|.|@|%|]{6,9}$/;
let regEmail = /^[a-zA-Z0-9]{6,14}@[a-z]{3,6}.com$/;
let regPhone = /^1[1|3|5-9]{2}[0-9]{8}$/;

简单介绍一下正则表达式，以 regName 为例，

2. 绑定好数据

1. 调用这个方法需要传入一个正则表达式，和一个节点 element，通过 vue3 的 v-model 绑定输入框内的值，ref 绑定 input 节点本身

如何绑定如下 ：

<!-- 姓名 -->
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">姓名:</span>
      <input
        ref="usernameIpt" -- ref 绑定节点，
        v-model="username" -- v-model 绑定节点
        placeholder="请输入您的用户名"
        type="text"
        class="form-control" -- 添加新的类名在这就会改变样式的
        aria-label="Username"
        aria-describedby="basic-addon1"
 2. 通过 if 判断检测结果是否为 true 来使用 setAttribute 设置不同的样式  
 用 Bootstrap 给 input 设置类名 ' is-valid ' (合法) 和 ' is-invalid ' (不合法) 
 预览合法的样式：is-valid  
 不合法的：is-invalid  
3. 封装一个正则判断并修改样式的方法 regMethods()  
1. 函数需要传入一个对应的正则表达式，对应的节点 
例如传入 regName 正则表达式，同时传入 usernameIpt 节点。 
// 封装正则判断方法
const regMethods = (thisReg, ele) => {
  if (thisReg.test(ele.value.value)) {
    // setAttribute 改变类名 bootstrap改变样式
    ele.value.setAttribute("class", "form-control is-valid");
  } else {
    ele.value.setAttribute("class", "form-control is-invalid");
2. 那如何确定到底传入哪一个正则判断组呢？  
 我们知道 input 节点有 聚焦 onfocus 和 失焦 onblur 事件， 
 这里的案例选择的当我们失去焦点时进行判断 
所以我们需要封装一个函数 regRun 包含我们每一个需要验证的 input 节点的各自的生效函数，regMethods 需要的两个参数也是在这一步传入的 
// 正则生效函数
const regRun = () => {
  // 失焦调用方法 1.用户名
  usernameIpt.value.onblur = () => {
    regMethods(regName, usernameIpt); // 调用判断方法，并传参
  // 2.密码
  passwordIpt.value.onblur = () => {
    regMethods(regPassword, passwordIpt); // 调用判断方法，并传参
  // 3.邮箱
  emailIpt.value.onblur = () => {
    regMethods(regEmail, emailIpt); // 调用判断方法，并传参
  // 4.手机号
  phoneIpt.value.onblur = () => {
    regMethods(regPhone, phoneIpt); // 调用判断方法，并传参
4. 在所有节点都挂载完后再运行此函数，vue 的数据响应会重新判断（重新调用 regRun） 
在 vue 的生命周期 onMounted 里运行此函数（regRun），确保所有 DOM 元素都渲染完毕。 
<script setup> // vue3组合式api
// 导入依赖 onMounted、ref
import { onMounted, ref } from "vue";
onMounted(() => {
  // 调用正则函数
  regRun();
</script> 
 感谢浏览！ 
                    Vue3 + Bootstrap4 完成表单验证功能技术栈：vue3 + Bootstrap难点：封装函数细节：正则表达式、vue3声明周期、改变Bootstrap类名间接改变样式、ref 和 v-model
				＃vue3-bootstrap-5-modal-component使用引导程序5的vue 3的简单模态组件
依存关系：
 该组件需要安装Bootstrap 5和Popper
 npm install bootstrap@next
npm install @popperjs/core
然后可以将它们包含在main.js文件中：
 import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap'
组件设置：
 您可以将其main.js导入到您的main.js文件中：
 import Modal form 'path to file/Modal.vue'
app.component('Modal', Modal);
或者，您可以在需要时将其本地导入每个组件中：
 import Modal from 'path to file
本教程要实现一个简单的后台管理系统，包含着陆，数据列表，数据查询，列表分页，添加数据，修改数据和删除数据等功能，教程会从Vue入门开始讲解，包含es6，Sass，Webpack，Bootstrap ，jQuery等技术，再到后台管理系统的一些常规功能，用Vue如何去实现。
可能会有人质疑Vue和jQuery的搭配，在我本人看来，jQuery本身已很成熟，而且包含了很多非常好用的插件，可以进行表单验证，会比Vue的成本低很多。在本教程中会用纯Vue和Vue + jQuery两种方式去实现某些功能，可用于对比两种方案在开发成本和性能上到底有多大的影响。
如果对Vue还不了解的建议先看看Vue基础教程，如果对Vue有一定了解的可以直接看VueERP
项目目录结构
VueBisc [Vue基础教程]
 VueERP [Vue项目教程]
技术点目录
认识Vue
认识数据驱动模式
认识MVVM模式
认识Vue
关于Vue的描述有过多，不外乎都会拿来与Angular和React对比，同样头顶MVVM双向数据驱动设计模式光环的Angular自然被对比的最多，但仍然，Angular在
				注意：Vue.js版本1的用户请改用。
 重大更改：从1.0版开始，此程序包使用受控组件，这意味着该值不再持久保存在字段组件上，而是持久保存在父使用者组件上。 这使得所有字段的行为都类似于正常的vue输入，使用v-model （而不是value ）来维护双向视图模型绑定。 如果您使用的是旧软件包，则需要安装版本0.4.0（也在Github中标记），尽管强烈建议您过渡到新版本。
 这个vue.js套件为HTML表单管理提供了一个全面的解决方案，包括演示，验证和（可选）AJAX提交。 该演示基于。
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
 有关工作原理的详细说明，请查看的和。
git clone https://github.com/ManiruzzamanAkash/Vue-3-Advance-CRUD.git
cd Vue-3-Advance-CRUD
npm install
API项目设置（Laravel API）
&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&quot;zh-cn&quot;&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&quo
import $ from 'jquery';
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/j
Django和Vue是两个流行的Web开发框架，Django是用Python编写的后端框架，Vue是用JavaScript编写的前端框架。
Django和Vue的源码包含了许多有用的组件和工具，可以帮助开发者创建高效、可靠和安全的Web应用程序。它们的源码都是开源的，意味着任何人都可以查看、修改和贡献改进代码。
Django的源码包括了许多模板、中间件和视图，这些都是用来协助开发者构建Web应用程序的基础组件。它还包括了许多与安全、表单处理和用户身份验证相关的功能，这些对于创建安全的Web应用程序至关重要。
Vue的源码包括了许多组件，如路由、状态管理和指令等，这些都是用来构建复杂的交互式Web应用程序的基础组件。它还提供了一些有用的开发工具，如调试器和测试工具，用于简化开发过程。
Django和Vue的源码可以相互结合使用，以创建全栈Web应用程序，其中Django作为后端，用来处理业务逻辑和数据持久化，Vue作为前端，用来呈现数据和实现交互。使用这种方法，开发者可以创建现代化、高效和灵活的Web应用程序，满足不同的商业需求。  
### 回答2：
Django Vue源码指的是使用Django作为后端框架，Vue作为前端框架，结合开发的web应用程序的源代码。Django是一个高度灵活的Python框架，可以轻易地进行数据库、表单、用户身份验证等操作，Vue则是一个开源的JavaScript框架，用于开发单页面应用程序。
Django Vue源码的优点在于，它结合了Django和Vue的两种技术，使得开发人员可以轻松构建功能强大、易于维护的Web应用程序。借助Vue的庞大生态系统，开发人员可以选择一系列易于集成的开源组件，从而加快开发速度。通过使用Vue提供的UI库，可以快速创建出高度响应的界面，增强用户体验。
此外，Django Vue源码具有高度可配置性和可定制性。Django提供了诸如REST框架、ORM等功能，让开发人员可以按照自己的需求来构建API接口，Vue则提供了Vuex和Vue Router等组件，帮助人员实现更加复杂的Web应用程序功能。
总的来说，Django Vue源码是一种强大的技术组合，能够让开发人员更加便捷地开发高度可定制化的Web应用程序。  
### 回答3：
Django Vue源码是一个结合了Django和Vue框架的开源项目，它的主要目的是实现快速构建现代化Web应用程序。该项目的源码可以在Github上找到。
Django Vue源码是基于Django REST框架和Vue.js构建的，它提供了一种方便的方法来构建Web应用程序，可以轻松地创建SPA（单页应用程序）或MPA（多页应用程序），并且同时提供了Django框架的可靠性和Vue框架的灵活性。
该项目的前端部分是基于Vuejs框架构建的，使得开发人员可以利用Vuejs框架的各种功能特性，如组件化、数据驱动、虚拟DOM等等，来开发丰富的用户界面。同时，后端采用Django REST框架，通过RESTful API的方式与前端进行交互。
通过Django Vue源码，开发人员可以快速搭建一个完整的Web应用程序，通过Vue.js构建前端用户交互界面，并且可以实现与后端API交互，完成数据的传输和操作。
值得一提的是，Django Vue源码还与Bootstrap框架结合使用，提供了丰富的UI组件库，使得开发界面更加快捷和美观。
总的来说，Django Vue源码是一个提供了高效、灵活、可靠的方案，用于快速搭建现代化Web应用程序的开源项目，值得开发人员深入学习和探索。