详解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实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
JavaScript对象学习小结
Sep 02 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
phpinfo 系统查看参数函数代码
2009/06/05 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
python中Flask框架简单入门实例
2015/03/21 Python
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
英文自荐信格式
2013/11/28 职场文书
行政助理工作职责范本
2014/03/04 职场文书
法人授权委托书格式
2014/04/08 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
最新离婚协议书范本
2014/08/19 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
大明湖导游词
2015/02/03 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏
Python如何使用循环结构和分支结构
2022/04/13 Python
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python
教你如何用cmd快速登录服务器
2022/06/10 Servers