Vue-Ant Design Vue-普通及自定义校验

柔光的暖阳◎ 2022-04-23 20:18 532阅读 0赞

这段时间在使用[Ant Design Vue][]进行项目的前端部分开发，进行一个记录，分享…

# Ant Design Vue #

Ant Design Vue是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。在GitHub上可以找到几个Ant Design的Vue组件。不过相比较而言，Ant Design Vue更胜一筹。Ant Design Vue共享Ant Design of React设计工具体系，实现了所有Ant Design of React的组件，支持现代浏览器和 IE9 及以上（需要 polyfills）。可以让熟悉Ant Design的在使用Vue时，很容易的上手。  
`nodejs`，`npm`包括`Ant Design Vue`安装什么的就不说了，可以百度，之后有时间我会写一篇关于这一套东西的安装教程，关于`Ant Design Vue`，可以直接查看官方文档：[https://vue.ant.design][Ant Design Vue]  
下面说一下关于Ant Design Vue中的表单校验及自定义校验。

# 自定义校验 #

先给一张Ant Design Vue得form表单中不同类型的校验场景图，看看是否有你需要的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1X3dlbl9qaWU_size_16_color_FFFFFF_t_70]  
官方提供了 `validateStatus`, `help` ,`hasFeedback` 等属性，你可以不需要使用 `Form.create` 和 `getFieldDecorator`，自己定义校验的时机和内容。

*  validateStatus: 校验状态，可选 ‘success’, ‘warning’, ‘error’, ‘validating’。
 *  hasFeedback：用于给输入框添加反馈图标。
 *  help：设置校验文案。

**说明一点：** 当你使用Ant Design Vue的使用，经过 Form.create 包装的组件将会自带 this.form 属性  
`this.form` 提供的 关于校验的API如下 ：

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
   <th>类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>validateFields</td> 
   <td>校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件</td> 
   <td>Function([fieldNames: string[]], [options: object], callback: Function(errors, values))</td> 
  </tr> 
 </tbody> 
</table>

然后看下`Form.Item`的参数设置（主要看关于校验的）：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>extra</td> 
   <td>额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。</td> 
   <td>string/slot</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>hasFeedback</td> 
   <td>配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用。</td> 
   <td>boolean</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>help</td> 
   <td>提示信息，如不设置，则会根据校验规则自动生成</td> 
   <td>string/slot</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>validateStatus</td> 
   <td>校验状态，如不设置，则会根据校验规则自动生成，可选：‘success’ ‘warning’ ‘error’ ‘validating’</td> 
   <td>string</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

最后是`校验规则`设置:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1X3dlbl9qaWU_size_16_color_FFFFFF_t_70 1]  
相关的api及参数设置介绍完乐，下面上实例

# 实例 #

写一个简单的例子

form表单代码：

<a-form style="max-width: 500px; margin: 40px auto 0;" @submit="handleSubmit" :form="form">
            <a-form-item label="密码" :labelCol="{span: 5}" :wrapperCol="{span: 19}" class="stepFormText" hasFeedback >
              <a-input v-decorator="[ 'password', {rules: [{ required: true, message: '请输入密码' },{validator: handlePass}]} ]" name="password" />
            </a-form-item>
            <a-form-item label="确认密码" :labelCol="{span: 5}" :wrapperCol="{span: 19}" class="stepFormText" hasFeedback >
              <a-input v-decorator="[ 'confirm_password', {rules: [{ required: true, message: '请输入确认密码' },{validator: handleConfirmPass}]} ]" name="confirm_password" />
            </a-form-item>
            <a-form-item :wrapperCol="{span: 19, offset: 5}">
              <a-button :loading="loading" type="primary" htmlType="submit">提交</a-button>
            </a-form-item>
          </a-form>

进行一下说明，以确认密码的校验为例：

<a-input v-decorator="[ 'confirm_password', {rules: [{ required: true, message: '请输入确认密码' },{validator: handleConfirmPass}]} ]" name="confirm_password" />

`rules`中为一个数组，每一项就是一个校验规则，第一项规则容易理解，但是`{validator: handleConfirmPass}`是什么的，我们通过上面的校验规则设置（红框处）可以发现，这是当你设置自定义校验的时候需要这么写。**注意：callback 必须被调用**。  
`handleConfirmPass` 其实就是自定义校验的校验方法。  
上`js`代码:

效果图如下：  
1.空值提交  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1X3dlbl9qaWU_size_16_color_FFFFFF_t_70 2]  
2.自定义校验规则生效  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1X3dlbl9qaWU_size_16_color_FFFFFF_t_70 3]  
好了，这就是关于Ant Design Vue的普通及自定义校验的简单使用。

[Ant Design Vue]: https://vue.ant.design
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1X3dlbl9qaWU_size_16_color_FFFFFF_t_70]: /images/20220222/93bd413580a148b9b98269bd90576bb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1X3dlbl9qaWU_size_16_color_FFFFFF_t_70 1]: /images/20220222/dc9f22ece96b471c981e409d1737476b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1X3dlbl9qaWU_size_16_color_FFFFFF_t_70 2]: /images/20220222/d17105cea19b4ea8b883f9033392a370.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1X3dlbl9qaWU_size_16_color_FFFFFF_t_70 3]: /images/20220222/706abb176bf1403bad9f2f6c6c6f7113.png