关于前端:elment表单验证那些事

场景剖析:
依据不通须要在不同状况下动静实现验证表单数据
具体实现形式有两种,第一种代码如下:

<el-form-item label="执行科室" :prop="(isFlag == '查看类' || isFlag == '测验类') ? 'deptIds' : 'deptIdsEmpty'">

次要是prop写三目运算,判断是否须要验证
而后在规定中rules增加以下代码

deptIds: [{ required: true, message: '请抉择执行科室', trigger: 'change' }],//-------------这个是须要增加必填的验证deptIdsEmpty: []//------------------这个用来解决不须要必填的验证

上述代码能够做到动静增加是否必填的成果,亲测无效

第二种办法也能够实现,代码如下:

    <el-form-item label="执行科室" prop="deptIds" :rules="{required: isFlag == '查看类' ? true : false, message: '请输出别名拼音码', trigger: 'blur'}">

通过这种形式去判断required属性是否为true去增加勾销是否必填,这种写法html的构造会十分多,个人感觉前期保护可能会比拟吃力一些

tip: 上述两种形式都能够实现表单是否必填的需要,有须要的能够看一下,欢送留言探讨