精华内容
下载资源
问答
  • vue封装表单验证
    更多相关内容
  • 策略模式(Strategy Pattern)又称政策模式,其定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换。封装的策略算法一般是独立的,策略模式根据输入来调整采用哪个算法。关键是策略的 实现和使用分离 ...
  • 1.问题 我们公司的项目比较大 表格 表单的页面都不胜数 ,基于此封装了一些 可复用的代码。 2.分析 vue给了我们不一样的前端代码体验 element ui 给我们一套功能强大的组件 减少了我们大量的开发时间 。双剑合璧 ...
  • vue 封装表单

    2022-06-09 09:40:19
    临时写的,不够成熟,如果有更好的,希望能让小弟白嫖一下,谢谢大佬们 // 需要使用的页面 /** * @users_genre 判断不同表单 * @users_list 数据源 */ ...Form> <Row :gutter="16"> ...

    临时写的,不够成熟,如果有更好的,希望能让小弟白嫖一下,谢谢大佬们😁😁😁
    在这里插入图片描述

    // 需要使用的页面
    /**
    * @users_genre 判断不同表单
    * @users_list 数据源
    */
    <user_Form :users_genre="'government'" :users_list="student_list" @Form_item="Form_item" :formItem="formItem"></user_Form>
    
    <Row :gutter="16">
      <Col :span="users_genre === 'student' ? '6' : item.span" v-for="item in users_list" :key="item.id">
        <FormItem :label="item.label" :prop="item.prop" v-if="item.type === 'Input' && item.genre.indexOf(users_genre) !== -1">
          <Input :size="item.size" v-model="formItem[item.model]"
                 :placeholder="item.placeholder.split('|').length > 1 ? item.placeholder.split('|')[[item.genre.split('|').indexOf(users_genre)]] : item.placeholder"
                 :disabled="item.disabled" @input="surcreatepy(item.surcreatepyold, item.surcreatepydata)"></Input>
        </FormItem>
        <FormItem :label="item.label" :prop="item.prop" v-if="item.type === 'Select' && item.genre.indexOf(users_genre) !== -1">
           <Select :size="item.size" v-model="formItem[item.model]" :disabled="item.disabled">
              <Option v-for="subitem in item.children" :key="subitem.value" :value="subitem.value">{{subitem.label}}
              </Option>
           </Select>
        </FormItem>
      </Col>
    </Row>
    
    // 拼音转换插件
    import pinyin from 'js-pinyin'
    export default {
        name: 'Form',
        props: {
            users_list: {
                type: Array,
                default: false
            },
            formItem: {
                type: Object,
                default: false
            },
            users_genre: {
                type: String,
                default: ''
            }
        },
        watch: {
            formItem: {
                handler(val, oldVal) {
                    this.Form_item(val)
                },
                deep: true,
                immediate: true
            }
        },
        data() {
            return {
                formItem: {}
            }
        },
        methods: {
            Form_item(data) {
                this.$emit('Form_item', data)
            },
            // 姓转换
            surcreatepy(old, data) {
                this.formItem[data] = pinyin.getFullChars(this.formItem[old])
            }
        }
    }
    
    /**
     *  @placeholder 提示
     *  @label 标题
     *  @prop 验证规则
     *  @size 大小
     *  @model v-model绑定值
     *  @type 类型
     *  @genre 相当于权限
     *  @surcreatepyold 被转换的字段
     *  @surcreatepydata 转换后的拼音
     *  @span  col占的大小
     *  @disabled 是否禁用
     *  @children 下拉框的数据
     */
    export const student_list = [
        { id: 0, label: '姓', prop: 'surname', size: 'large', model: 'surname', placeholder: '请输入学生姓|请输入老师姓|请输入培训老师姓|请输入政府人员姓', type: 'Input', genre: 'student|teacher|train|government', surcreatepyold: 'surname', surcreatepydata: 'surnamepin', span: '6' },
        { id: 1, label: '名', prop: 'name', size: 'large', model: 'name', placeholder: '请输入学生名|请输入老师名|请输入培训老师名|请输入政府人员名', type: 'Input', genre: 'student|teacher|train|government', surcreatepyold: 'name', surcreatepydata: 'namepin', span: '6' },
        { id: 2, label: '姓(拼音)', disabled: 'true', prop: 'surnamepin', size: 'large', genre: 'student|teacher|train|government', model: 'surnamepin', placeholder: '英文 姓(拼音),需要与护照保持一致', type: 'Input', span: '6' },
        { id: 3, label: '名(拼音)', disabled: 'true', prop: 'namepin', size: 'large', genre: 'student|teacher|train|government', model: 'namepin', placeholder: '英文 名(拼音),需要与护照保持一致', type: 'Input', span: '6' },
        { id: 4, label: '手机号', prop: 'mobile', size: 'large', model: 'mobile', genre: 'teacher|train|government', placeholder: '请输入手机号', type: 'Input', span: '8' },
        { id: 5, label: '电话', prop: 'phone', size: 'large', model: 'phone', genre: 'teacher|train|government', placeholder: '请输入电话', type: 'Input', span: '8' },
        { id: 6, label: '邮编', prop: 'postalCode', size: 'large', model: 'postalCode', genre: 'teacher|train|government', placeholder: '请输入邮编', type: 'Input', span: '8' }
    ]    
    
    展开全文
  • vue3-form-validation 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
  • // 默认导出,一个文件只能默认导出一次 export default { len(el, binds) { el.style.color = el.value.trim().length > 3 ? 'red' : '#000' if (el.value.trim().length > 3) { if (el.parentNode....

    // 默认导出,一个文件只能默认导出一次
    export default {
      len(el, binds) {
        el.style.color = el.value.trim().length > 3 ? 'red' : '#000'
        if (el.value.trim().length > 3) {
          if (el.parentNode.lastChild.nodeName != 'SPAN') {
            let span = document.createElement('span')
            span.innerHTML = '字数超长了'
            el.parentNode.appendChild(span)
          }
        } else {
          if (el.parentNode.lastChild.nodeName == 'SPAN') {
            el.parentNode.removeChild(el.parentNode.lastChild)
          }
        }
    
      }
    }

    调用

    <!-- 支持es6模块化 -->
    <script type="module">
      import validator from './js/Validator.js'
    
      // 全局指令定义
      // 参数1:书写指令名称,不要加v-
      // 参数2:对象(标准写法) | 函数(简写,它是bind和update合成体)
      // 回调函数中的参数2,它就是用来获取指令参入的参数
      Vue.directive('len', validator.len)

    展开全文
  • 本文开篇第一句话,想引用鲁迅先生《祝福》里的一句话,那便是:“我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单”。这句话要从哪里说起呢?大概要从最近半个月的“全栈工程师”说起。...
  • 基于element ui +vue封装简易表单

    simpleForm.vue

    <template>
      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        :label-width="labelWidth"
      >
        <el-row>
          <el-col
            :span="item.span || 8"
            v-for="item in getConfigList()"
            :key="item.value"
          >
            <el-form-item
              :prop="item.value"
              :label="item.label"
              :label-width="item.labelWidth"
              :rules="item.rules"
            >
              <!-- 自定义label -->
              <template #label v-if="item.labelRender">
                <RenderComp :createElementFunc="item.labelRender" />
              </template>
              <!-- 默认solt -->
              <template v-if="item.elType === 'slot'">
                <slot :name="'form-' + item.value" />
              </template>
              <!-- 普通输入框 -->
              <el-input
                v-if="item.elType === 'input'"
                v-model="formData[item.value]"
                :type="item.type"
                :disabled="item.disabled"
                :placeholder="getPlaceholder(item)"
                :clearable="item.clearable === false ? item.clearable : true"
                :maxlength="item.maxlength"
                v-bind="item.vBind"
                @change="handleEvent(item.value, formData[item.value])"
              >
                <!-- 前置文本 -->
                <template #prepend v-if="item.prepend">{{ item.prepend }}</template>
                <!-- 后置文本 -->
                <template #append v-if="item.append">{{ item.append }}</template>
              </el-input>
              <!-- 文本输入框 -->
              <el-input
                v-if="item.elType === 'textarea'"
                v-model.trim="formData[item.value]"
                type="textarea"
                :disabled="item.disabled"
                :placeholder="getPlaceholder(item)"
                :autosize="item.autosize || { minRows: 4, maxRows: 6 }"
                :maxlength="item.maxlength"
                show-word-limit
                @change="handleEvent(item.value, formData[item.value])"
              />
              <!-- 计数器 -->
              <el-input-number
                v-if="item.elType === 'inputNumber'"
                v-model="formData[item.value]"
                :clearable="item.clearable === false ? item.clearable : true"
                :disabled="item.disabled"
                v-bind="item.vBind"
                style="width: 100%"
                @change="handleEvent(item.value, formData[item.value])"
              />
              <!-- 单选框 -->
              <el-radio-group
                v-if="item.elType === 'radio'"
                v-model="formData[item.value]"
                v-bind="item.vBind"
                :disabled="item.disabled"
              >
                <el-radio
                  :label="childItem[item.arrKey]"
                  v-for="(childItem, childIndex) in listTypeInfo[item.list]"
                  :key="childIndex"
                  @change="handleEvent(item.value, formData[item.value])"
                  >{{ childItem[item.arrLabel] }}
                </el-radio>
              </el-radio-group>
              <!-- 复选框 -->
              <el-checkbox-group
                v-if="item.elType === 'checkbox'"
                v-model="formData[item.value]"
                :disabled="item.disabled"
                v-bind="item.vBind"
                @change="handleEvent(item.value, formData[item.value])"
              >
                <el-checkbox
                  v-for="val in listTypeInfo[item.list]"
                  :key="val.value"
                  :label="val.value"
                  :disabled="val.disabled"
                  >{{ val.label }}</el-checkbox
                >
              </el-checkbox-group>
              <!-- 下拉框 接收数组 -->
              <el-select
                v-if="item.elType === 'select'"
                v-model="formData[item.value]"
                v-bind="item.vBind"
                :disabled="item.disabled"
                :clearable="item.clearable === false ? item.clearable : true"
                :filterable="item.filterable === false ? item.filterable : true"
                :placeholder="getPlaceholder(item)"
                @change="handleEvent(item.value, formData[item.value])"
              >
                <el-option
                  v-for="(childItem, childIndex) in listTypeInfo[item.list]"
                  :key="childIndex"
                  :label="childItem[item.arrLabel]"
                  :value="childItem[item.arrKey]"
                />
              </el-select>
              <!-- 下拉框 接收对象-->
              <el-select
                v-if="item.elType === 'select-obj'"
                v-model="formData[item.value]"
                v-bind="item.vBind"
                :disabled="item.disabled"
                :clearable="item.clearable === false ? item.clearable : true"
                :filterable="item.filterable === false ? item.filterable : true"
                :placeholder="getPlaceholder(item)"
                @change="handleEvent(item.value, formData[item.value])"
              >
                <el-option
                  v-for="(value, key, index) in listTypeInfo[item.list]"
                  :key="index"
                  :label="value"
                  :value="key"
                ></el-option>
              </el-select>
              <!-- 单个日期选择框 -->
              <el-date-picker
                v-if="item.elType === 'date'"
                v-model="formData[item.value]"
                :type="item.dateType"
                v-bind="item.vBind"
                :picker-options="item.TimePickerOptions"
                :clearable="item.clearable === false ? item.clearable : true"
                :disabled="item.disabled"
                :value-format="item.format || 'yyyy-MM-dd'"
                :placeholder="getPlaceholder(item)"
                @change="handleEvent(item.value, formData[item.value])"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 按钮 -->
        <div v-if="isOperator">
          <el-button
            v-for="val in getOperatorList()"
            :key="val.label"
            @click="val.fn(val)"
            :type="val.type"
            :icon="val.icon"
            >{{ val.label }}</el-button
          >
        </div>
      </el-form>
    </template>
    
    <script>
    import RenderComp from './renderComp'
    export default {
      name: 'YForm',
      components: {
        RenderComp
      },
      props: {
        // 表单数据
        formData: {
          type: Object,
          default: () => {
            return {}
          }
        },
        // 表单渲染数据
        fieldList: {
          type: Array,
          default: () => {
            return []
          }
        },
        // 验证规则
        rules: {
          type: Object,
          default: () => {
            return {}
          }
        },
        // 操作按钮list
        operatorList: {
          type: Array,
          default: () => {
            return []
          }
        },
        // 下拉选项数据
        listTypeInfo: {
          type: Object,
          default: () => {
            return {}
          }
        },
        // label宽度
        labelWidth: {
          type: String,
          default: '160px'
        },
        // 是否显示操作按钮
        isOperator: {
          type: Boolean,
          default: true
        }
      },
      data() {
        return {}
      },
      methods: {
        // 显示内容
        getConfigList() {
          return this.fieldList.filter(
            (item) =>
              !item.hasOwnProperty('show') ||
              (item.hasOwnProperty('show') && item.show)
          )
        },
        // 显示按钮
        getOperatorList() {
          return this.operatorList.filter(
            (item) =>
              !item.hasOwnProperty('show') ||
              (item.hasOwnProperty('show') && item.show)
          )
        },
        // placeholder的显示
        getPlaceholder(row) {
          let placeholder
          // 请输入type
          const inputArr = ['input', 'textarea']
          // 请选择type
          const selectArr = ['select', 'time', 'select-obj', 'date']
          if (inputArr.includes(row.elType)) {
            placeholder = '请输入' + row.label
          } else if (selectArr.includes(row.elType)) {
            placeholder = '请选择' + row.label
          } else {
            placeholder = row.label
          }
          return placeholder
        },
        // 事件
        handleEvent(key, val) {
          this.$emit('handleEvent', key, val)
        },
        // 实例
        getForm() {
          return this.$refs.form
        },
        // 重置表单
        resetFields() {
          return this.$refs.form.resetFields()
        },
        // 清空校验
        clearValidate() {
          return this.$refs.form.clearValidate()
        }
      }
    }
    </script>
    
    

    renderComp.js

    <script>
    export default {
      name: 'RenderComp',
      props: {
        createElementFunc: Function
      },
      render(h) {
        return this.createElementFunc(h)
      }
    }
    </script>
    
    

    README.md

    <template>
      <div class="form-data">
        <simpleForm
            ref="simpleForm"
            :form-data="formInfo.formData"
            :fieldList="formInfo.fieldList"
            :rules="formInfo.rules"
            :operatorList="formInfo.operatorList"
            :listTypeInfo="listTypeInfo"
            @handleEvent="handleEvent"
        >
            <!-- 自定义插槽 -->
            <template #form-yy>
                这是插槽
            </template>
        </simpleForm>
      </div>
    </template>
    <script>
    import simpleForm from '@/views/components/simpleForm'
    
    export default {
      components: {
        simpleForm
      },
      data() {
        const isEmail = (rule, value, callback) => {
          const reg = /^([a-z0-9A-Z]+[-|._]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\.)+[a-zA-Z]{2,}$/
          if (!reg.test(value)) {
            callback(new Error('请输入正确格式的邮箱'))
          } else {
            callback()
          }
        }
        return {
          // form表单
          formInfo: {
            formData: {
              id: '', // *唯一ID
              account: '', // *用户账号
              password: '', // *用户密码
              number: 1,
              sex: '', // *性别: 0:男 1:女
              hobby: [], // *爱好: 0:男 1:女
              createDate: '', // 创建时间
              accountType: '',
              email: '', // 邮箱
              desc: '', // 描述
              radio: '',
              status: [], // *状态: 0:停用,1:启用(默认为1)'
              treeNode: ''
            },
            fieldList: [
              {
                labelRender: () => {
                  return (
                    <span>自定义label<el-tooltip >
                      <template slot='content'>
                        <span>自定义label</span>
                      </template>
                      <i class='el-icon-warning-outline' />
                    </el-tooltip></span>
                  )
                },
                label: '账号', value: 'account', elType: 'input', clearable: false, maxlength: 10, vBind: { 'show-word-limit': true }},
              { label: '密码', value: 'password', elType: 'input', type: 'password' },
              { label: '计数器', value: 'number', elType: 'inputNumber', vBind: { min: 1, max: 10 }},
              { label: '爱好', value: 'hobby', elType: 'checkbox', list: 'hobbyList' },
              { label: '性别', value: 'sex', elType: 'select', list: 'sexList', arrLabel: 'key', arrKey: 'value' },
              { label: '平台用户', value: 'accountType', elType: 'select-obj', list: 'accountTypeList' },
              { label: '单选', value: 'radio', elType: 'radio', list: 'radioList', arrLabel: 'label', arrKey: 'value' },
              { label: '多选状态', value: 'status', elType: 'select', list: 'statusList', arrLabel: 'key', arrKey: 'value', vBind: { multiple: true }},
              { label: '插槽', show: true, value: 'yy', elType: 'slot' },
              { label: '时间', value: 'createDate', elType: 'date', dateType: 'year', format: 'yyyy' },
              { label: '邮箱', value: 'email', elType: 'input', rules: [{ required: true, message: '邮箱不能为空!' }, { validator: isEmail }] },
              { label: '描述', value: 'desc', elType: 'textarea', maxlength: 300, span: 24 }
            ],
            rules: {
              account: [
                { required: true, message: '请输入账号', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
              ],
              password: [
                { required: true, message: '请输入密码', trigger: 'blur' }
              ],
              sex: [
                { required: true, message: '请选择性别', trigger: 'change' }
              ],
              hobby: [
                { type: 'array', required: true, message: '请至少选择一个爱好', trigger: 'change' }
              ]
            },
            operatorList: [
              { label: '提交', type: 'danger', fn: this.submitForm },
              { label: '重置', type: 'primary', fn: this.resetForm }
            ]
          },
          // 相关列表
          listTypeInfo: {
            hobbyList: [
              { label: '吉他', value: '0' },
              { label: '看书', value: '1' },
              { label: '美剧', value: '2' },
              { label: '旅游', value: '3' },
              { label: '音乐', value: '4' }
            ],
            radioList: [
              { label: '吉他', value: '0' },
              { label: '看书', value: '1' }
            ],
            sexList: [
              { key: '女', value: 1 },
              { key: '男', value: 0 }
            ],
            accountTypeList: {
              0: '手机用户', 1: '论坛用户', 2: '平台用户'
            },
            statusList: [
              { key: '启用', value: 1 },
              { key: '停用', value: 0 }
            ]
          }
        }
      },
      // 方法
      methods: {
        handleEvent(key, val) {
          switch (key) {
            case 'account':
              console.log('val :>> ', val)
              break
          }
        },
        submitForm() {
          this.$refs.simpleForm.getForm().validate((valid) => {
            if (!valid) return
            console.log('formData==>', this.formInfo.formData)
          })
        },
        resetForm() {
        //   Object.assign(this.$data.formInfo.formData, this.$options.data().formInfo.formData)
          for (const obj of this.formInfo.fieldList) {
            this.$set(obj, 'disabled', true)
          }
        }
      }
    }
    </script>
    
    
    展开全文
  • vue+elementui技术栈的小伙伴们,在平时项目里,特别是OA项目,会大量用到表单以及表单校验。经常会处理一些必填项,对它们是否有值的判断显得有些繁琐和臃肿,本文将封装方法,解决该问题。 最近业务中频繁增加...
  • vue 封装Form表单组件

    千次阅读 2020-07-07 20:17:09
    在项目中很常见的交互:回显表单信息 + 验证表单 + 提交表单信息,而表单的类型也有很多(复选框,单选框,下拉框,输入框,文本框等等等)如果多个页面都有表单验证的交互且表单的内容不一样,难道我们就要去写多个...
  • 图标上传组件是我自定义封装的组件,首先点击下图中的确定按钮模拟出现表单验证不通 此时使用上传图片功能,可以看见下图中错误提示信息没有了 实现代码如下: 自定义上传组件:(重点的地方就是代码备注的地方) ...
  • } } else if (rule.required) { callback(new Error(rule.msg)) } else { callback() } } 使用: xx.vue <script> import { bankNumberValid, phoneNumberValid } from '@/utils/validate_provider' // 表单校验 ...
  • Vue iview 表单封装验证

    2020-12-23 11:53:35
    以下内容转自iview社区,仅供自己查看使用Form表单部分提 交重 置新建 Format.js 文件,编写校验规则var regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/var email = /^(\w+\.?)*\w+@(?:\w+\.)\w+$/var tel = /...
  • 本文实例讲述了vue 动态表单开发方法。分享给大家供大家参考,具体如下: 概要 动态表单指的是我们的表单不是通过vue 组件一个个编写的,我们的表单是根据后端生成的vue模板,在前端通过vue构建出来的。主要的思路是...
  • ## antd-for-vue 表单验证失效 自定义表单验证使表单非空验证失效(其他验证失效)##### antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll里面可以接收校验字段数组, options, 和一个回调函数* ...
  • 使用表单,可以收集、验证和提交数据。表单常用的地方是在搜索、信息提交、内容编辑以及新增。搜索表单编辑表单这里以最基本的Form代码为例进行分析: 基本表单根据基本的Form代码,我们可以知道:通过分析Form代码...
  • vue实现表单验证功能  本篇主要讲述如何基于NUXT的validate方法实现表单的验证。 将验证方法封装后,使用的时候只需像:rules="filter_rules({required:true,type:'mobile'})"这么一行代码便可在页面中实现验证了。...
  • Vue.prototype.$pattern = pattern; ** 3.使用 ** //测试变量 let str='aaaa' //测试调用 let pattern = this.$pattern.moneyNegativePattern; console.log("测试正则=>",pattern.test(str)) 输出:测试正则=> ...
  • 也就是每一个输入框都有自己的校验规则 第二种: 在大多数情况下 第一种已经可以 但是为了防止 部分用户转空子 会存在第二种校验的方式 也就是再点击注册按钮的时候触发 这是ui组件库 自己已经封装好 的验证方法
  • vue中自制表单验证

    2021-09-23 15:27:57
    我们在不借助第三方组件库的情况下,自己制定表单验证 借助vee-validate 具体实现步骤 第一步:安装依赖包 npm i vee-validate@4.0.3 第二步:导入Form和Field组件并使用 import { Form, Field } from 'vee-...
  • vue+elementui 表单封装

    2021-07-08 08:51:15
    表单组件封装 elForm.vue文件 <template> <el-form ref="form" :inline="inline" :label-width="labelWidth" class="datafill-elform" :model="baseData" :rules="rules" @keyup.enter.native=...
  • //姓名 let FormValidate = (function() { function FormValidate() {} FormValidate.Form = function() { // From表单验证规则,可用于公用的校验部分 return { // 电话号码的验证 Tel: (rule, value, callback) =...
  • Vue3 +ElementPlus 表单组件的封装

    千次阅读 2022-05-06 16:16:12
    Vue3 +ElementPlus 表单组件的封装 在系统中,表单作为用户与后端交互的重要传递组件使用频率极高,故对其进行封装是必然的,也是一个编写规范代码的前端程序员必须做的一件事。 在Vue3中封装组件时,能感受到与Vue2...
  • Vue3+Ts,利用vee-validate封装一个验证表单类似于Elementui el-form
  • 前言 有ABCD四个表单,提交的时候同时校验(是的,后台管理系统的需求就是这样),巧用new promise。... function checkForm(formName) { //封装验证表单的函数 var result = new Promise(function(resolve, rejec
  • 组件:searchForm.vue <!-- 搜索表单 --> <template> <div class="ces-search"> <el-form :size="size" inline :label-width="labelWidth"> <el-form-item v-for='item in searchForm'...
  • 文章介绍用的是el-form-valid-item组件,组件是基于Element框架的表单验证封装,让我们的验证的规则有更高的可复用性,可适用于VUE2+ElementUI和VUE3+ElementPlus
  • Vue项目elementUI中封装表单验证

    千次阅读 2018-07-20 10:27:53
    1.直接在Vue文件中使用验证: &lt;template&gt; &lt;div class="login-wrap"&gt; &lt;div class="ms-title"&gt;后台管理系统&lt;/div&gt; &lt;div ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,312
精华内容 2,924
关键字:

vue封装表单验证