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