详解element-ui中表单验证的三种方式


Posted in Javascript onSeptember 18, 2019

最近项目中一直使用的element-ui作为前端框架,对于最常使用的表单验证,做出以下总结:

第一种常用方式:表单上加rules{object}

<el-form class="apply-form first-form" :model="formData" :rules="rule" ref="form">
  <el-form-item label="姓名" prop="visitorName">
    <el-input v-model="formData.visitorName" placeholder="请输入姓名" clearable></el-input>
  </el-form-item>
  <el-form-item label="身份证号" prop="cardCode">
    <el-input v-model="formData.cardCode" :maxlength="18" placeholder="请输入身份证号" clearable></el-input>
  </el-form-item>
</el-form>

这种方式需要在data()中写入rule{},对于需要校验字段prop中的如visitorName写上验证规则,如下:

data() {
  return {
    formData: {
      visitorName: '',
      cardType: 1,
      cardCode: ''
    },
    rule: {
      visitorName: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
        {
            required: true,
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
            message: '姓名不支持特殊字符',
            trigger: 'blur'
        }
     ],
     cardCode: [
       { required: true, message: '请输入身份证号', trigger: 'blur' },
       { min: 15, max: 18, message: '请如实填写18位号码,以供学校保卫科核对', trigger: 'blur' },
       {
          required: true,
          pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
          message: '请输入正确的身份证号码',
          trigger: 'blur'
       }
     ]
   }
  }
}

其中对于有些需要自定义的校验规则可以作为变量写在data中:

data() {
  let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,12}$/
  var validateNewPwd = (rule, value, callback) => {
    if (!reg.test(value)) {
      callback(new Error('密码应是6-12位数字、字母或字符!'))
    } else if (this.form.oldPasswd === value) {
      callback(new Error('新密码与旧密码不可一致!'))
    } else {
      callback()
    }
  }
  var validateComfirmPwd = (rule, value, callback) => {
    if (!reg.test(value)) {
      callback(new Error('密码应是6-12位数字、字母或字符!'))
    } else if (this.form.newPasswd !== value) {
      callback(new Error('确认密码与新密码不一致!'))
    } else {
      callback()
    }
  }
  return {
    form: {
      newPasswd: '',
      comfirmPwd: ''
    },
    rules: {
      newPasswd: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { validator: validateNewPwd, trigger: 'blur' }
      ],
      comfirmPwd: [
        { required: true, message: '请输入确认密码', trigger: 'blur' },
        { validator: validateComfirmPwd, trigger: 'blur' }
      ]
    }
  }
}

比较适用于表单全部字段校验或需要校验字段类型比较简单的数据类型

第二种方式:在el-form-item单个添加

<el-form-item label="电话号码" class="el-form-item--small has-error" :prop="phoneNum" :rules="[{ required: true, message: '请输入电话号码', trigger: 'blur' }, { required: true, pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/, message: '请输入正确的电话号码', trigger: 'blur' }]">
  <el-input v-model="v.phoneNum" :maxlength="11" placeholder clearable></el-input>
</el-form-item>

这种方式适用于需要个别检验的字段,或者表单字段有变动的校验;

第三种方式:动态增减表单项

先看需求效果图

详解element-ui中表单验证的三种方式

对应的数据结构:

详解element-ui中表单验证的三种方式

对应删除增加表单项的操作为:

addPhone() {
  let len = this.formData.phoneInfoList.length
  this.$set(this.formData.phoneInfoList, len, {
    relation: [],
    phoneNum: '',
    relationType: 0,
    schoolId: this.selectedUser.schoolId,
    userCode: this.selectedUser.userCode
  })
},
deletePhone(item) {
  if (this.formData.phoneInfoList.length > 1) {
    // 表示先获取这个元素的下标,然后从这个下标开始计算,删除长度为1的元素
    this.formData.phoneInfoList.splice(this.formData.phoneInfoList.indexOf(item), 1);
  } else {
    this.$vux.toast.text('至少保留一个家长亲情号码!')
    return false
  }
},

这样的rule、prop直接写就对应不上表单mode绑定的对象上的属性,所以在此要用循环的方式找到要校验的字段所在数据中的索引,然后再以字符串拼接的方式连上校验字段名称:

详解element-ui中表单验证的三种方式

渲染出来的html为:

详解element-ui中表单验证的三种方式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
控制台报错object is not a function的解决方法
Aug 24 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 #Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 #Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 #Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 #Javascript
解决layer 动态加载select 失效的问题
Sep 18 #Javascript
webpack的tree shaking的实现方法
Sep 18 #Javascript
js实现窗口全屏示例详解
Sep 17 #Javascript
You might like
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
php实现的农历算法实例
2015/08/11 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
python实现IOU计算案例
2020/04/12 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
详解Python yaml模块
2020/09/23 Python
python 模拟登陆github的示例
2020/12/04 Python
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
初中学校对照检查材料
2014/08/19 职场文书
讲党性心得体会
2014/09/03 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
浅谈JS的二进制家族
2021/05/09 Javascript
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server