# hai2007-input-check:对输入进行表单校验

这是一个插件，我们首先需要全局安装：

```js
import inputCheck from 'vee-components/libs/input-check/index.js';

// 安装
Vue.use(inputCheck);
```

然后，我们就可以在表单中使用了：

```html
<form autocomplete="off" novalidate>
    <input v-model='key' name='输入框名称' v-input-check='[key,"validate-express"]'/>
    <!-- 可以有任意多的输入框 -->
</form>
```

如你所见，上述的```v-input-check```就是我们对每个输入框定义规则的地方，值是一个数组，第一个值就是输入框的```v-model```，第二个值是一个字符串，语法如下：

```js
validate-express="val1:param1:param2|val2|valu3:param1"
```

不同的规则使用```|```分割，需要传递参数的规则的参数通过```:```分割。我们来看几个例子：

- ```v-input-check='[key,"required|maxLength:10|regexp:^\\d{1,5}$"]'```
- ```v-input-check='[key,"required"]'```

目前可选的内置规则如下：

- ```required:boolean```:表示必输，有一个可选参数，表示是否必输，默认true
- ```maxLength:num```:最大长度
- ```minLength:num```:最小长度
- ```regexp:str```:正则表达式

页面的规则定义好了以后，你有两中方式获取校验的结果。

### 1.JS的方式

首先，你需要获取你需要查看情况的表单的校验对象：

```js
let formError=this.$error(formnode);
```

此对象包含三个方法供你使用：

- 方法一：判断表单是否合法

```js
formError.isValiadte();
```

- 方法二：如果非法，获取第一个非法信息

```js
let first_error=formError.first();
```

返回的数据格式为：

```js
{
    "$el":错误的输入框结点
    "$error":当前输入框的第一个错误提示信息
}
```

- 方法三：获取指定结点的错误信息

```js
let error=formError.getError(target);
```

### 2.HTML的方式

提供这种方式的目的是为了可以在页面实时反馈当前表单的输入情况。

首先，在表单上，你可以通过判断class包含```v-valid```或者```v-invalid```来判断表单是否合法。

同样的，添加指令```v-input-check```的地方同样可以这样判断该处是否合法，而对于更具体的错误细节，比如必输非法，class就会像这样```v-invalid-required v-invalid```。

[<< 返回首页](../README.md)