详解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 ajax获取网站Alexa排名的代码
Dec 12 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
javascript动画算法实例分析
Jul 31 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
JavaScript 是什么意思
Sep 22 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
深入解读Python解析XML的几种方式
2016/02/16 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Python实现全排列的打印
2018/08/18 Python
基于python实现雪花算法过程详解
2019/11/16 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
商务邀请函范文
2014/01/14 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
竞选学委演讲稿
2014/09/13 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
师范生小学见习总结
2015/06/23 职场文书