详解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的event详解。
Sep 06 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 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
php封装好的人民币数值转中文大写类
2015/12/20 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
javascript 数组的方法集合
2008/06/05 Javascript
Javascript 二维数组
2009/11/26 Javascript
javascript整除实现代码
2010/11/23 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
Python pass详细介绍及实例代码
2016/11/24 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python 基础教程之包和类的用法
2017/02/23 Python
python编程实现希尔排序
2017/04/13 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
四种会话跟踪技术
2015/05/20 面试题
计算机本科生自荐信
2013/10/15 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
企业党员一句话承诺
2014/05/30 职场文书
基层党员对照检查材料
2014/08/25 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
2015年市场营销工作总结
2015/07/23 职场文书