详解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 相关文章推荐
用javascript获取textarea中的光标位置
May 06 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
svg动画之动态描边效果
Feb 22 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 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中实现Javascript的escape()函数代码
2010/08/08 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
php实现两个数组相加的方法
2015/02/17 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
JavaScript 动态生成方法的例子
2009/07/22 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
JavaScript 数组详解
2013/10/10 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
JS高级运动实例分析
2016/12/20 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
Vue中实现权限控制的方法示例
2019/06/07 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
Python的Django框架中的表单处理示例
2015/07/17 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
python 实现两个线程交替执行
2020/05/02 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
总会计师岗位职责
2014/02/19 职场文书
班主任寄语大全
2014/04/04 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
食品质检员岗位职责
2015/04/08 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers
MySQL限制查询和数据排序介绍
2022/03/25 MySQL
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技
redis lua限流算法实现示例
2022/07/15 Redis