详解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 相关文章推荐
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
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 header下载函数
2014/01/31 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
Python的时间模块datetime详解
2017/04/17 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
Pytorch to(device)用法
2020/01/08 Python
python绘制封闭多边形教程
2020/02/18 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
Ruby如何定义一个类
2012/10/08 面试题
物流管理专业自荐信
2014/06/23 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
公司表扬稿范文
2015/05/05 职场文书
地心历险记观后感
2015/06/15 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
canvas 中如何实现物体的框选
2022/08/05 Javascript