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中可以绑定两条,
但是我在使用时候并不好用,所以建议只使用一条,将所有规则放到方法中统一处理:
扫码关注我们更多精彩等待你发现