element 修改表单值后表单验证无效_vue+element实现from表单自定义正则

vue+element自定义form表单验证 0 1需求

   对用户添加的信息需要验证，确保录入数据库的数据的正确性，效果图如下：

0 2代码实现

      首先，在form表单中引用rule规则，并绑定对应的值(以身份证号为例，其它等同)：

<el-dialog title="正则demo" :visible.sync="dialogAreaAddVisible">    <el-form :model="addForm" :rules="addFormRules" ref="addForm">       <el-row :gutter="10">          <el-col :span="10">            <el-form-item label="身份证号" :label-width="formLabelWidth" prop="personCardNo">              <el-input type="text" v-model="addForm.personCardNo" size="small">el-input>            el-form-item>          el-col>        el-row>    el-form>el-dialog>

    其次，将提前封装好的正则表达式引入页面中：

import regular from '@/common/regular/index.js';

    详细的regular会在后续发布，也可以自行百度，能力强者可以自行书写规则，部分截图如下：

 最后，在data中使用regular：

addFormRules: {   personCardNo: [       { validator: regular.idCardRule, trigger: 'blur',required:true }   ] }

    以上就是代码的实现，代码实现非常简单，如果不自信也会有很多坑会摆在面前。

0 3踩到的坑

    1.在给form表单绑定值的时候，必须保证字段统一：

prop，v-model绑定的值统一 ，一目了然而且不会出现奇怪的问题。

    2.官方api给出的demo中prop中可以绑定两条，

但是我在使用时候并不好用，所以建议只使用一条，将所有规则放到方法中统一处理：

扫码关注我们

更多精彩等待你发现