详解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 相关文章推荐
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
js实现放大镜特效
May 18 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
Node.js使用Angular简单示例
May 11 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
手把手教你如何编译打包video.js
Dec 09 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中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
javascript运动详解
2015/07/06 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
python处理二进制数据的方法
2015/06/03 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
python def 定义函数,调用函数方式
2020/06/02 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
美国在线工具商店:Acme Tools
2018/06/26 全球购物
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
维德科技C#面试题笔试题
2015/12/09 面试题
什么时候需要进行强制类型转换
2016/09/03 面试题
毕业生就业推荐信范文
2013/12/01 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
自我查摆剖析材料
2014/10/11 职场文书
学生上课说话检讨书
2014/10/25 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技