ElementUI表单验证构成要素

prop设置方法

prop是表单校验的属性名，必须与form model对象中的属性一一对应。

• 一般情况

如：表单model对象为：

ruleForm: {
  host_ids: [],
  osd_deploy_type: 'bcache',
  xstore: 'filestore'
}

对应的表单prop应为：

<el-form-item prop="host_ids">
 ...
</el-form-item>
<el-form-item prop="osd_deploy_type">
...
</el-form-item>
<el-form-item prop="xstore">
...
</el-form-item>

          可以看到，我们定义了三个model对象：host_ids、osd_deploy_type、xstore，他们在html标签中（即每个表单项）分别对应一个prop属性值，当用户填写表单时，表单值会自动填充至model对象对应的属性中。

• model对象中包含对象（多层嵌套属性）

如：表单model对象为：

ruleForm: {
  host_ids: [],
  osd_deploy_type: 'bcache',
  xstore: 'filestore',
  common: {
    data_devs: [],
	journal_size: 1,
	omap: 'false'
  }
}

对应的表单prop应为：

<el-form-item prop="host_ids">
...
</el-form-item>
<el-form-item prop="osd_deploy_type">
...
</el-form-item>
<el-form-item prop="xstore">
...
</el-form-item>
<el-form-item prop="common.data_devs">
...
</el-form-item>
<el-form-item prop="common.journal_size">
...
</el-form-item>
<el-form-item prop="common.omap">
...
</el-form-item>

可以看出，如果model中嵌套对象，对应的prop也应以获取对象值的形式进行设置，即：嵌套对象的key.属性。嵌套多层对象同理，需带上每层对象的key。

rules设置方法

本文介绍2种rules的设置方法：

• 第一种方法：在el-form标签中设置rules属性

例如有如下html代码：

<el-form :model="ruleForm" :rules="rules">
    <el-form-item prop="host_ids">
	...
    </el-form-item>
</el-form>

可以看到在el-form标签中设置了rules属性，其值rules为在js中定义的变量名，如下所示：

rules: {
    host_ids:[{required: true, message: ''}],
    xstore: [{required: true, message: ''}]
}

rules变量中的host_ids属性与prop设置的host_ids属性对应，这样表单就可以自动匹配校验规则了。

• 第二种方法：在每个el-form-item标签中设置rules属性及规则

<el-form-item prop="host_ids" :rules="[{required: true, message: ''}]">
...
</el-form-item>

可以看到，el-form-item标签中设置了rules属性，其属性值即为该form表单的校验规则。

自定义验证规则

有时候ElementUI中自带的验证规则并不能满足某些特殊字段的校验，这就需要我们自定义验证规则。自定义验证规则有2个步骤：

1. 编写规则验证函数：

var checkHostlist = (rule, value, callback) => {
      if (!value || !value.length) {
        callback(new Error('请选择测试主机'))
      } else {
        callback()
      }
    }

可以看到，函数需要传入3个参数，分别是：

    rule—当前验证规则对象

    value—当前表单值

    callback—回调函数，调用后表示完成当前规则验证。若验证通过，直接调用callback()；若验证失败，callback中传入Error的实例。

2. 指定规则验证函数：

host: [
 { required: true, message: '不能为空', trigger: 'blur' },
 { validator: checkHostList, trigger: 'blur' }
]

可以在编写验证规则时，通过validator属性指定自定义的规则验证函数。

总结

以上就是存储管控系统表单验证技术介绍以及一些实践经验的总结，包括prop设置方法、rules设置方法和自定义验证规则。我们可以根据实际应用场景灵活组合。