iView表单使用验证器required空格验证错误

iView表单组件使用async-validator验证器对表单域中数据进行验证，给
Form 设置属性 rules，同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。完整的验证规则请参照开源项目 async-validator。验证方法也支持 Promise。
当我们对表单中某个string类型的域设置为必填时，我们可以使用如下规则

{type: 'string' ,required:true,message:'不能为空'}

但是如果我们直接输入空格也会通过验证
如何对输入的空格进行验证?
下面介绍两种方法：
方法一：在表单域的标签上绑定时使用v-model.trim代替v-model

例如

<form-item label=" 姓名 " prop="name">
<i-input v-model.trim="name" placeholder="请填写姓名" size="small">
</i-input>
</form-item>

使用这种方法会直接将首尾空格trim掉，表单提交时的数据是没有首尾空格的，如果想保留首尾空格，可以使用方法二。

方法二：在验证规则上加上transform函数
例如

{type: 'string' ,transform:value=>value?value.trim():'',required:true,message:'不能为空'}

transform函数是在验证时对数据进行预处理的函数(处理后的结果仅用作验证)，不会改变表单的数据。

driver_name: [
               { required: true, message: this.$t("validate_driver_name"), trigger: "blur" },
],
driver_tel: [
             { required: true, message: this.$t("validate_driver_tel"), trigger: "blur" },
             {
                            pattern: /^1[345789]\d{9}$/,
                            message: this.$t("regexp_driver_tel"),
                            trigger: "blur",
             },
],

直接再require里面增加： transform:value=>value?value.trim():''

driver_name: [
               { required: true, transform:value=>value?value.trim():'',message: this.$t("validate_driver_name"), trigger: "blur" },
],
driver_tel: [
             { required: true, transform:value=>value?value.trim():'', message: this.$t("validate_driver_tel"), trigger: "blur" },
             {
                            pattern: /^1[345789]\d{9}$/,
                            message: this.$t("regexp_driver_tel"),
                            trigger: "blur",
             },
],

可以看到这样去掉空格后，验证就正常了

iView表单使用验证器required空格验证错误

Guess you like