详解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 相关文章推荐
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
javascript常用的正则表达式实例
May 15 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
PHP+jquery+ajax实现分页
Dec 09 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
PHP下对数组进行排序的函数
2010/08/08 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
php 类自动载入的方法
2015/06/03 PHP
php探针不显示内存解决方法
2019/09/17 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
教师专业理论水平的自我评价分享
2013/11/09 职场文书
会计岗位职责模板
2014/03/12 职场文书
个人作风建设心得体会
2014/10/22 职场文书
优秀班主任申报材料
2014/12/16 职场文书
市场部经理岗位职责
2015/02/02 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
Python实现批量自动整理文件
2022/03/16 Python