详解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 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
javascript cookies操作集合
Apr 12 Javascript
javascript URL编码和解码使用说明
Apr 12 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
vue实现井字棋游戏
Sep 29 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数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
python版本的读写锁操作方法
2016/04/25 Python
python图像常规操作
2017/11/11 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
Python面向对象之Web静态服务器
2019/09/03 Python
wxPython实现带颜色的进度条
2019/11/19 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
python压包的概念及实例详解
2021/02/17 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
化学相关工作求职信
2013/10/02 职场文书
幼儿园小班评语
2014/04/18 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
领导干部学习心得体会
2016/01/23 职场文书
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python