iView表单验证

首先对我是用的环境进行一下说明：
vue-cli + iview；

安装好 iview 组件库，然后引入，具体就不再赘述，可以看我的另一篇博客；

---

Form表单的使用：

1. 绑定数据

// 接受数据的对象
data(){
	return{
		userInfo: {
        	username: '',
        	password: '',
        	captcha: ''
       },
	}
}

<!--将对象绑定到 From标签的， model属性-->
<Form :model="userInfo">

<!--在输入框上绑定数据-->
<FormItem>
	<Input 
		type="text" 
		placeholder="Username" 
		v-model="userInfo.username" 
	/>
</FormItem>

2. 表单验证

<!--
	给 Form 标签绑定一个 rules 属性，值是一个对象，
	这个对象里就是验证规则，这个规则后面做讲解，这里先搞清楚流程
-->
<Form :rules="ruleInline">

// 定义验证规则的对象，绑定到 <Form> 的 rules属性；
// 这个对象的每一项，都是对应的 <FormItem> 的 prop属性的
data(){
    return {
        ruleInline: {
            username: [
                {
                    required: true,
                    message: '用户名不能为空'
                },
                {
                    min: 2,max: 12,
                    message: '用户名长度 2 - 12个字符'
                }
            ],
            password: [
                {
                    required: true,
                    message: '密码不能为空'
                }
            ],
            captcha: [
                {
                    required: true,
                    message: '验证码不能为空'
                }
            ]
        }
    }
}

<!--
	<FormItem> 的prop 对应上边的每一项的 key
-->
<FormItem prop="username">
    <Input type="text" placeholder="Username" />
</FormItem>

<FormItem prop="password">
    <Input type="password" placeholder="Password" />
</FormItem>

<FormItem prop="captcha">
    <Input type="text" placeholder="Code" />
</FormItem>

3. 到目前为止，在 <Input> 失去焦点的时候，就会进行规则的验证；

4. 点击 登录按钮，进行规则验证

Form methods #

方法名	说明	参数
validate	对整个表单进行校验，参数为检验完的回调，会返回一个 Boolean 表示成功与失败，支持 Promise	callback
validateField	对部分表单字段进行校验的方法，参数1为需校验的 prop，参数2为检验完回调，返回错误信息	callback
resetFields	对整个表单进行重置，将所有字段值重置为空并移除校验结果	无

标记 <form>

<Form ref="loginForm">

登陆按钮 点击事件

<Button @click="loginFn()" long>login</Button>

methods:{
	loginFn(){
	    // this.$refs['loginForm']   表单对象
	    
	    this.$refs['loginForm'].validate((val)=>{
	        console.log(val);
	        // 表示校验成功或失败
	    });
	}
}

async-validator

https://www.npmjs.com/package/async-validator

书写格式：

username: [
	{规则1},
	{规则2},
	{...}
]

常用规则：

// 必填项 required
{required: true, message: '用户名不能为空'}

// 字符长度限制
{min: 2, max: 6, message: '长度为2-6个字符'}

// 类型
{type: 'number', message: '只能输入数字'}
{type: 'url', message: '路径格式不对'}
{type: 'email', message: '邮箱格式不对' }

// 长度限制 len
// 如果len 属性与最小和最大范围属性组合，则len优先。
{len: 4, message: '最大长度是4'}