vue 表单校验（二）

vue 表单校验（二）

vue element-ui表单校验

由于现在使用element-ui进行form表单校验，因而使用其自带的校验规则进行校验，发现有些并不是那么好校验，或者说是校验起来很繁琐，因而一直在研究中

表单校验分类

前后端校验

  • 前端校验
  • 后端校验

    这种目前一般是结合起来使用，很少单纯前端校验，或者单纯后端校验的

前端检验

  • 数据录入时校验
  • 数据回显时校验
  • 动态创建时校验
  • 数据是否必填时校验

接下来所谈论的校验都是基于前端进行校验，若是后天校验，只是统一校验规则而已，这样前后便可以统一了。其实这里并不是很简单，但是不得不细心，而已最好，前后台都要其校验规则，以及校验话术放在一个公共的地方，避免在每个具体文件内进行修改。若是能更好的话，类似 google email 那样，通过后台返回规则类型，以及对应前台的具体编号，进行显示即可（比如1： 不能为空， 2：校验规则不合...） 这样的好处，前台只认这个数字即可，不然后台返回什么，前台出什么错误，都是统一显示（这个扯远了），讲今天的重点

基于 element-ui 自带的 表单校验

  • 数据录入时校验

element-ui form validate

  • el-form 标签

    • 属性

      • model 对象却只能是一维 { a: 1, b: 2 }, 不能是 { a: { b: 2 } }, 不然关联不到
      • rules 按照规则要求即可
      • ref 提交表单时触发
  • el-form-item 标签 必须使用这个进行包裹 表单框... 校验才会有效
    • 属性

      • prop 只有标识了这个才会进入校验
<template>
  <el-form
    :model="ruleForm"
    ref="ruleForm"
    label-width="100px"
    :rules="rules">
    <el-form-item
      label="活动名称"
      prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        @click="submitForm(‘ruleForm‘)">立即创建</el-button>
      <el-button @click="resetForm(‘ruleForm‘)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  ...
  data () {
    const isNum = (rule, value, callback) => { // 参数顺序必须如
      let reg = /^[0-9]{5,20}$/;
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error("不是数据"))
      }
    }

    return {
      ruleForm: {
        name: ‘‘
      },
      rules: {
        name: [
          {
            required: true,      // 用来设置是否必填
            message: ‘不能为空‘,  // 错误信息展示
            trigger: ‘blur‘      // 触发校验事件
          },
          {
            min: 3,
            max: 5,
            message: ‘长度在 3 到 5 个字符‘,
            trigger: ‘blur‘
          },
          {
            validator: isNum,    // 自定义校验
            trigger: [‘blur‘, ‘change‘]  // 填写 blur change时，可以达到类似 input事件，实时进行校验
          }
        ]
      }
    }
  },
  methods: {
    /**
     * 表单提交
     */
    submitFomr (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert(‘success‘)
        } else {
          alert(‘error‘)
        }
      })
    },
    /**
     * 重置表单
     */
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
</script>

以上是一个正常表单的大致模型

  • 数据回显时校验

主要是数据返回时，要不要触发校验

  • 不触发 github 这里有一些解释，不是很好弄
  • 触发 （跟产品沟通过，倾向于这种）

    当前基于数据反显时就触发校验

setFormData () {
 setTimeout(() => {
   this.ruleForm = {
     name: ‘测试项目‘,
     region: 2,
     type: [1, 2],
     resource: 1,
     desc: ‘测试数据回显时校验颜色变化问题‘
   }

   this.$nextTick(() => {
     // 为了回显时，不只是el-select 校验被触发
     this.$refs.ruleForm.validate()
   })
 }, 1500)
  • 动态创建时校验

    有时候需要动态创建一个输入框时，也需要检验，这时候就需要动态校验，不然一直卡着过不去

<el-row
  class="sc-row"
  :gutter="20"
  v-for="(t, i) in ruleForm.contactList"
  :key="t.id">
  <!-- ：key="i" 没问题； :key="t.id" 时，不会变亮  ==== 没必要在第一次赋值时给id，新增时再给即可-->
  <el-col :span="8">
    <el-form-item
      label="姓氏"
      :prop="‘contactList.‘ + i +‘.family_name‘"
      :rules="[
            { required: true, message: ‘不能为空‘, trigger: [‘blur‘, ‘change‘]}
          ]">
      <el-input v-model="t.family_name"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="8">
    <el-form-item
      label="名字"
      :prop="‘contactList.‘ + i +‘.contact_name‘"
      :rules="[
            {required: true, message: ‘不能为空‘, trigger: [‘blur‘, ‘change‘]}
          ]">
      <el-input v-model="t.contact_name"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="8">
    <el-button @click.prevent="deleteConcats(t)">删除</el-button>
  </el-col>
</el-row>

重点，切记切记

  • 循环 v-for == v-for = ‘(item, i) in list‘ :key="item.id" i
  • el-form-item 属性
    • :prop = "contactList.${i}.contact_name"
    • :rules="[{{required: true, message: ‘不能为空‘, trigger: [‘blur‘, ‘change‘]}]" 写相应的校验规则
  • 删除已添加的表单
    • v-for 绑定时，:key="item.id" 使用对应值的id,而不是对应的索引i
    addConcats () {
  this.ruleForm.contactList.push({
    family_name: ‘‘,
    contact_name: ‘‘,
    id: Date.now() //  还是需要使用，这样可以 避免校验触发时，删除后却没有变化
  })
},
deleteConcats (item) {
    const List = this.ruleForm.contactList
    const index = List.findIndex((val) => {
      return item === val
    })
    List.splice(index, 1)
  }
}
  • 数据是否必填时校验 

<el-form-item
  label="是不是必填"
  prop="isRequire"
  :rules="[
    {required: isRequire, message: ‘请填写‘, trigger: ‘blur‘}
  ]">
  <el-input v-model="ruleForm.isRequire"></el-input>
</el-form-item>

是否选填，个人建议直接以动态form表单形式进行展示，这样便可以通过 { reuired: isRequire }，isRequire Boolean类型

总结

至此，大致的form表单校验就差不多了，虽然看起来很简单，但是也是我不断采坑过来的，在此，我更加推荐使用 element-ui-verify,里面有详细的文档，多多关注即可

  • 当前校验的缺点

    • 动态创建
    <el-row class="sc-row" :gutter="20" v-for="(t, i) in ruleForm.contactList" :key="t.id">
  <el-col :span="8">
    <el-form-item
      label="姓氏"
      :prop="‘contactList.‘ + i +‘.family_name‘"
      :rules="[
        { required: true, message: ‘不能为空‘, trigger: [‘blur‘, ‘change‘]}
      ]">
      <el-input v-model="t.family_name"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="8">
    <el-form-item
      label="名字"
      :prop="‘contactList.‘ + i +‘.contact_name‘"
      :rules="[
        {required: true, message: ‘不能为空‘, trigger: [‘blur‘, ‘change‘]}
      ]">
      <el-input v-model="t.contact_name"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="8">
    <el-button @click.prevent="deleteConcats(t)">删除</el-button>
  </el-col>
</el-row>

    上面的 姓氏和名字 同为中文或英文时，很难进行判断 element密码两次是否相同,但是当前动态创建时，无法传递索引，自定义方法中无法进行传参，导致拿不到同一索引下的姓氏跟名字，也就无法进行匹配判断了

  • 其他注意细节
    • 在自定义验证里面每一个判断都要有callback(),就是要保证callback()一定会执行到，不然既不报错，也不提交代码，令人很是无语
    • async-validator
    • 上面例子的code

到此，算是一个给自己年末去心病吧，这个困惑我太久了，到现在想想都恐怖，算是简单补充下吧，后期再多多注意

在此抛出几个问题,留给自己思考

  • 大型表单时，哪儿错误，自动定位到哪儿，同时 focus
  • 统一错误信息，后台传给前台具体id，以供前台进行错误信息展示，这个前台统一管理
  • 考虑使用其他校验插件，多多扩充自己的脑容量

原文地址：https://www.cnblogs.com/sinosaurus/p/10341223.html

时间： 2024-08-13 08:50:37

vue 表单校验（二）的相关文章

vue表单校验（三）

vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 通过表单提交时,触发校验,未通过的表单会添加is-error,之后滚动到对应的错误位置即可 页面视图 实现逻辑 触发条件 在提交时,若是未通过则开始进行判断,由于是依赖于is-error的class类名,因而需要等form表单错误的元素添加完is-error类名后再进行判断 submitForm1

表单校验二

HTM5新增属性 placeholder  提示,输入为空时显示提示信息,获得焦点输入时提示信息消失 required 输入不能为空 pattern  校验input域的模式(正则表达式) validity属性 validityState对象 属性        描述 valueMissing      表单元素设置了required特性,则为必填项.如果必填项的值为空,就无法通过表单验证,valueMissing属性会返回true,否则返回false. typeMismatch     输入值

Vue 表单校验 vee-validate

gitHub 地址:https://github.com/baianat/vee-validate 官网API 地址:https://baianat.github.io/vee-validate/api/ 配置 先下载到项目 npm install vee-validate --save 封装一个自定义指令,方便后面使用 import {Validator, install as VeeValidate} from 'vee-validate'; import {required, min, m

应用二：Vue之ElementUI Form表单校验

  表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明~ 如下代码是Form表单校验的demo示例: <template> <div id="demo"> <el-dialog title="表单校验示例" :close-on-click-modal="false" :visible.sync="dialogVisible" width=&q

【转】vue.js表单校验详解

1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue"); var VueValidator=require("vue-validator"); Vue.use(VueValidator); 2.直接使用script标签引入vue.js 要下载vue-validator,那么进入cdn的地址https://cdn.bootcss.com/vue-validator/2.

vue+element表单校验功能

要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能:   实现这个功能,总共分为以下4布: 在el-form标签中定义:rules="rules";ref="reference" 在el-form-item定义prop="name"; 在选项data中定义rules校验规则; 在提交方法中检查用户行为 template代码:

vue+iview的form表单校验总结

这篇文章时关于如何使用iview的form表单校验.主要学习如何使用form校验(以校验文字长度为例),以及如何动态添加校验规则和异步校验. 1.为需要校验的表单添加form标签 <!--注意: ref/rules/model/prop等属性是必须的--> <Form res="foemRef" :rules="formRules" :model="formData" v-if="liveNode">

【JAVAWEB学习笔记】28_jqueryAjax：json数据结构、jquery的ajax操作和表单校验插件

Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯.这些特性使JSON成 为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络

利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要去改造它们(毕竟自己还不到那个写一个完美的校验框架的层次).我用过formValidation这个校验框架,虽然它跟bootstrap配合地很好,但是校验风格太死板,不太满足个性化的场景:后来我找到了jquery.val