详解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获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
javascript html5实现表单验证
Mar 01 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
基于vue.js实现购物车
Jan 15 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
react项目从新建到部署的实现示例
Feb 19 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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
php实现的双色球算法示例
2017/06/20 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
Python模块的加载讲解
2019/01/15 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
几个数据库方面的面试题
2016/07/01 面试题
中国文明网签名寄语
2014/01/18 职场文书
入学生会自荐书范文
2014/02/05 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
浅谈克隆 JavaScript
2021/11/02 Javascript