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 #

标记 <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'}

validator 库

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

# 安装
> npm i validator

// 导入
import validator from 'validator'

validator库 & async-validator 结合使用

因为 iview使用的是 async-validator，所以先介绍一下这个的自定义验证；
如果只是验证必选项之类的，上边已经有介绍了，但是如果验证一个手机号码，或者是更加复杂的就需要自定义验证；

下面以一个手机号为例：

1. 介绍 async-validator 自定义验证的写法
   定义一个函数 validator()，有三个参数，这里使用到 value和 callback
value： 用户输入的值
   callback()：
   1）如果参数为 true，则显示 message中的报错内容，
   2）如果为空，则不显示报错内容；
   3）参数为 new Error('格式不对') ，则可以省略 message

mobile: [
    {required: true, message: '手机号不能为空'},
    {
        validator: (rule, value, callback)=>{
            /**
             * value            用户输入的值
             * callback(true)   检测失败，显示 message的内容
             * callback(new Error('手机号码格式不正确'))   检测失败，显示 error的内容
             * callback()       检测成功
             */
        },
        message: '手机号码格式不正确'
    }
]

2. validator 模块的使用
   以验证手机号码为例子
   如果验证通过，返回true，否则返回false

validator.isMobilePhone('手机号', '地区')

3. validator库 & async-validator 结合使用

mobile: [
    {required: true, message: '手机号不能为空'},
    {
        validator: (rule, value, callback)=>{
            if(validator.isMobilePhone(value, 'zh-CN')){
                callback()
            }else{
                callback(new Error('手机号码格式不正确'))
            }
        }
    }
]

validator 库的中文说明

https://blog.csdn.net/qi_dabin/article/details/81137007