vue element-ui 单独引入表单规则 减少页面结构

最新推荐文章于 2022-11-25 22:02:42 发布
最新推荐文章于 2022-11-25 22:02:42 发布
阅读量685 收藏 1
点赞数
文章标签： es6 vue.js chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43634411/article/details/109477211
版权

对比一下单独引入表单规则和 写在页面的表单规则

没有外部引入表单规则

在这里插入图片描述

<!--  -->
import { callbackify } from 'util';
<template>
  <body id="poster">
    <el-form class="login-container"
     :rules="rules"
     ref="loginForm"
     :model="loginForm"
      label-position="left" label-width="0px">
      <h3 class="login_title">系统登录</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>

      <el-form-item style="width: 100%">
        <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="loginIn">登录</el-button>
      </el-form-item>
    </el-form>
  </body>
</template>

<script>

// import rules from '@/utils/InspectionRules.js'

export default {
  // name: 'Login',
  data () {
    // 自定义表单验证规则
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!value) {
        console.log(value)
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
      // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
      // 所以在前面加了一个+实现隐式转换

        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 100)
    }
    var checkPassword = (rule, value, callback) => {
      const ispassword = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,30}$/
      if (!value) {
        return callback(new Error('密码不能为空'))
      }
      setTimeout(() => {
        if (ispassword.test(value)) {
          callback()
        } else {
          callback(new Error('密码格式不对,必须包含数字，小写字母，大写字母，特殊符号'))
        }
      }, 1000)
    }
    return {
      loginForm: {
        username: '',
        password: ''
      },
      responseResult: [],
      // 表单检验规则
      rules: {
        // username: [{ validator: rules.FormValidate.Form().validatePhone, trigger: 'blur' }],
        // password: [{ validator: rules.FormValidate.Form().validatePsdReg, trigger: 'blur' }],
        username: [{ validator: checkPhone, trigger: 'blur' }],
        password: [{ validator: checkPassword, trigger: 'blur' }]
      }
    }
  },
  created () {

  },
  methods: {
    loginIn () {
      // 调用一下 user 下的登陆方法 ,为什么这么调用 去看 vuex
      this.$store.dispatch('user/loginIn')
    }

  }
}
</script>

<style>
* {
  margin: 0px;
  padding: 0px;
}
#poster {
  background: url("../static/imgs/2.jpg") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
  background-repeat: no-repeat;
}
body {
  margin: 0px;
  padding: 0px;
}
/* div盒子居中 背景色透明 */
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  /* margin: 90px auto; */
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  opacity: 0.8;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>

引入表单规则

在这里插入图片描述

<!--  -->
import { callbackify } from 'util';
<template>
  <body id="poster">
    <el-form class="login-container"
     :rules="rules"
     ref="loginForm"
     :model="loginForm"
      label-position="left" label-width="0px">
      <h3 class="login_title">系统登录</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>

      <el-form-item style="width: 100%">
        <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="loginIn">登录</el-button>
      </el-form-item>
    </el-form>
  </body>
</template>

<script>
// 引入表单验证规则
import rules from '@/utils/InspectionRules.js'

export default {
  // name: 'Login',
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      responseResult: [],
      // 表单检验规则
      rules: {
        username: [{ validator: rules.FormValidate.Form().validatePhone, trigger: 'blur' }],
        password: [{ validator: rules.FormValidate.Form().validatePsdReg, trigger: 'blur' }]
        // username: [{ validator: checkPhone, trigger: 'blur' }],
        // password: [{ validator: checkPassword, trigger: 'blur' }]
      }
    }
  },
  created () {

  },
  methods: {
    loginIn () {
      // 调用一下 user 下的登陆方法 ,为什么这么调用 去看 vuex
      this.$store.dispatch('user/loginIn')
    }

  }
}
</script>

<style>
* {
  margin: 0px;
  padding: 0px;
}
#poster {
  background: url("../static/imgs/2.jpg") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
  background-repeat: no-repeat;
}
body {
  margin: 0px;
  padding: 0px;
}
/* div盒子居中 背景色透明 */
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  /* margin: 90px auto; */
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  opacity: 0.8;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>

引入的表单规则

在这里插入图片描述


// 账号
const codeReg = /^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/
// 电话
const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/

// 必须为数字
const numberReg = /^\d+$|^\d+[.]?\d+$/

// 密码
const passwordReg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/

// 联系人
const contactsReg = /^[\u0391-\uFFE5A-Za-z]+$/

const regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

const emailReg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/

const FormValidate = (function () {
  function FormValidate () {}
  // From表单验证规则  可用于公用的校验部分
  FormValidate.Form = function () {
    return {
      // 账号的验证规则
      validateCode (rule, value, callback) {
        if (!value) {
          return callback(new Error('请输入账号'))
        }
        if (!codeReg.test(value)) {
          callback(new Error('账号必须为6-20位字母和数字组合'))
        } else {
          callback()
        }
      },

      // 只能数字的验证
      validateNumber (rule, value, callback) {
        if (value !== '') {
          if (!numberReg.test(value)) {
            callback(new Error('员工数量必须为数字'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      },

      // 密码的验证
      validatePsdReg (rule, value, callback) {
        if (!value) {
          return callback(new Error('请输入密码'))
        }
        if (!passwordReg.test(value)) {
          callback(new Error('请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种'))
        } else {
          callback()
        }
      },

      // 联系人
      validateContacts (rule, value, callback) {
        if (!value) {
          return callback(new Error('请输入联系人'))
        }
        if (!contactsReg.test(value)) {
          callback(new Error('联系人不可输入特殊字符'))
        } else {
          callback()
        }
      },

      // 邮箱的验证规则
      validateEmail (rule, value, callback) {
        if (value !== '') {
          if (!emailReg.test(value)) {
            callback(new Error('邮箱格式不正确'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      },

      // 电话号码的验证
      validatePhone (rule, value, callback) {
        if (!value) {
          return callback(new Error('请输入手机号码'))
        }
        if (!phoneReg.test(value)) {
          callback(new Error('手机格式不正确'))
        } else {
          callback()
        }
      },

      // 身份证的验证规则
      ID (rule, value, callback) {
        if (!value) {
          return callback(new Error('身份证不能为空'))
        }
        if (!regId.test(value)) {
          callback(new Error('请输入正确的二代身份证号码'))
        } else {
          callback()
        }
      }
    }
  }

  return FormValidate
}())

exports.FormValidate = FormValidate
qq_43634411
关注
python vue element_在Vue项目中使用ElementUI(一)
weixin_39535752的博客
12-20 748
初始化一个Vue项目F:\Test>vue init webpack Test1? Project name test1? Project description A Vue.js project? Author Selience ? Vue build standalone? Install vue-router? No? Use ESLint to lint your code? No?...
单独使用elementui_Vue在单独引入js文件中使用ElementUI的组件
weixin_34916566的博客
01-17 2410
Vue在单独引入js文件中使用ElementUI的组件问题场景：我想在vue中的js文件中使用elementUI中的组件，因为我在main.js中引入了element包和它的css，并挂载到了全局vue实例中。然后我就在js文件中这样使用this.$notify({title: "失败",message: "请先登录老铁~",type: "error"});结果报错了，报错信息如下TypeErro...
vue rules 表单验证_view-design form-item 独立规则验证
weixin_39807352的博客
11-22 725
相信大家在实现前端表单验证的过程中都有这样的需求：某字段不要求必填，但填写的内容必须要符合相应规则。在原始 html 或自己定制的轮子中这样的需求很容易实现，在使用他人/团队开发出的组件时可能你所需的实现方式在对方的文档中没有很明显的写出个案例给你参考，怎么办？在非不得已的情况下不建议自己造轮子或该别人的源码，仔细研究一下文档就会发现，答案都在里面了。就比如它：要求：我需要这个字段非必填，但填写了...
Vue Element-ui Form表单使用
weixin_43639373的博客
10-08 4663
Vue Element-ui Form表单使用 在面对项目中大量的表单提交以及规则验证，Element-ui Form表单是我们最好的帮手，下面介绍一下form表单的使用方法以及规则校验的封装。 el-form 为了将所有表单的规则校验封装在一起 我们需要在el-form加rules属性，rules可以在data当中定义一个全局的变量。 以上代码将所有表单的验证规则写在一起，带有validat...
vue + elementui: el-form
护着我的发际线的博客
12-02 777
最近发现form表单的字段很多，但是又不想一个一个写的，想到可以json+for去处理。 第一步：封装一个form组件。 <el-form ref="form" :model="form" label-width="150px" class="demo-dynamic flex" > <el-form-item :label="it
Vue element-ui父组件控制子组件的表单校验操作
10-15
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，包括表单验证。在大型应用中，我们经常需要在父组件中控制子组件的行为，比如触发子组件的表单验证。以下将详细介绍如何实现...
基于vue element-ui的登录注册页面源码.rar
05-07
Element-UI 是一套为开发者、设计师和产品经理准备的基于 Vue 的组件库，它提供了丰富的UI组件，如表格、按钮、提示、下拉菜单等，使得开发者能够快速构建出美观且响应式的用户界面。 在"基于vue element-ui的登录...
vue-element-nocode-admin:element-ui 的代码可视化编辑
05-06
element-ui 的代码可视化编辑器，自动生成表单代码，列表代码。不是一个可视化解决方案，更像是生成模板的工具 :house: 网页版本，在preview分支 Install npm install -g ele-cli How to Use 服务端占用 3000 端口 ...
Vue ~ element-ui 动态表单验证，支持添加和删除操作
最新发布
07-27
总之，“Vue ~ element-ui 动态表单验证”项目展示了如何利用Vue.js和Element-UI的强大功能，结合动态表单和验证规则，实现一个灵活且功能丰富的后台表单系统。通过掌握这些技术，开发者可以更高效地处理各种表单...
VUE element-ui响应式步骤进度条样式代码
06-11
在本文中，我们将深入探讨如何使用VUE框架与element-ui库来创建响应式的步骤进度条。Element-ui是一个基于Vue.js的UI组件库，它提供了一系列丰富的界面元素，其中包括步骤条组件，非常适合用于处理多步骤流程的用户...
ElementUI 表单验证
XinShun的博客
09-03 1375
&lt;el-form :rules="rules" :ref="formName" :model="detail" label-position="center" label-width="90px"&gt; &lt;/el-form&gt; export default { data () { return { formName: &
el-form-item 组件单独设置当前表单项校验规则（自定义校验规则）+正则校验
热门推荐
工作中遇到问题记录
07-08 1万+
el-form-item 组件单独设置当前表单项校验规则（自定义校验规则）
vue表单 循环生成校验， 自定义校验规则，手动触发某条校验规则
shaoliao_qian的博客
09-03 7026
普通校验（具体直接看前端框架的官方文档就好了） formRules: { name: [ { required: true, message: '请输入名称', trigger: 'blur' } ] }, 循环生成的form-item要校验 直接写在iten上面 <Form-item :label="'选项' + (index + 1)" v-for="(item,index) in dataForm.option" :rules="[{ required: true,me.
Element-UI框架的使用（三）-- Form 表单
weixin_57246557的博客
08-14 6850
Form 表单 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据 一、基本使用 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"&
activiti表单设计器_Form-Generator - Element UI 表单设计与代码生成器
weixin_39715290的博客
10-28 4267
Element UI 目前在中后台项目中应用广泛，是十分流行的 Vue 组件框架。而表单元素，作为最常用的用户输入组件，在设计开发过程中几乎都要涉及，且往往大同小异。能不能减少重复的代码编写工作呢？能不能甚至不写代码，点几下鼠标就能生成想要的表单呢？Form-Generator，这个基于 Element UI 框架 Form 元素的表单设计与代码生成器，就能解放你的双手。ElementUI框架简介...
在vue项目中单独引入某一elementui组件
Femi的博客欢迎大家
04-25 5460
1.安装element-ui库 npm i element-ui -S 2.在启动文件中配置 import{DatePicker}from'element-ui'; import'element-ui/lib/theme-chalk/index.css'; Vue.use(DatePicker); 3.在页面中使用 <el-date-picker v-model="value1" type="daterange" ...
element-ui在项目当中的引入以及按需引入使用
m0_68997646的博客
11-25 2556
element-ui在项目当中的引入以及按需引入使用
引入并使用Element
TangChi1970的博客
04-06 2895
引入并使用Element 开发工具与关键技术： MVC 作者：汤池 撰写时间：2022/4/7 1.首先需要打开DW软件，新建一个html网页，然后保存到一个文件夹当中 2.然后打开element官网，下载使用Element必须引用的脚本文件 3.除来index.css和index.js之外还需要vue.js文件，因为Element是基于Vue搭建的框架，在Vue官网下载vue.js文件，复制到新建文件夹里面，然后按顺序引用 4.你要使用的Element得在一个ID下面去布局，所以创建一个ID为cou
Element-UI + Vue 表单验证解决方案
"本文主要探讨了在Vue项目中，结合element-ui组件库如何实现表格内嵌表单验证的功能，提供了一种解决方案，并通过代码示例进行了详细说明。" 在开发Web应用时，尤其是在处理数据录入和编辑的场景中，我们常常需要在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值