uView——表單驗證

簡介

　　界面，綁定對象綁定規則。對象規則，api

　　uView的表單驗證：--- 界面（<u-form> <u-form-item> <u-input> 三個包裹），綁定數據 :model , v-model、綁定規則 ref="規則對象"，prop="規則對象“，定義對象( form )和規則（rule），注冊和調用api

 

　　<u-form> 

　　　　屬性：

　　　　　　:model：綁定對象

　　　　　　ref：通過ref，在onReady生命周期調用組件的setRules方法綁定驗證規則。 this.$ref.引用.setResult()。綁定規則

　　　　作用：生成表單域

 

　　<u-form-item>

　　　　屬性

　　　　　　label：標簽名

　　　　　　prop：綁定rules里規則對象。綁定規則

　　　　作用：設置驗證規則

　　

　　<u-input>

　　　　屬性

　　　　　　v-model：雙向綁定。綁定對象

• type{String}
  內置校驗規則，如這些規則無法滿足需求，可以使用正則匹配、或者使用validator自定義方法並結合uView自帶驗證規則。

  • string：必須是 string 類型，默認類型
  • number：必須是 number 類型
  • boolean：必須是 boolean 類型
  • method：必須是 function 類型
  • regexp：必須是 regexp 類型，這里的正則，指的是判斷字段的內容是否一個正則表達式，而不是用這個正則去匹配字段值
  • integer：必須是整數類型
  • float：必須是浮點數類型
  • array：必須是 array 類型
  • object：必須是 object 類型
  • enum：必須出現在 enmu 指定的值中
  • date：必須是 date 類型
  • url：必須是 url 類型
  • hex：必須是 16 進制類型
  • email：必須是 email 類型
  • any：任意類型

　　　　　　placeHodler：提示信息

 

　　生成對象

　　　　在data里生成雙向綁定的

　　　　data() {
            return {
                form: {
                    username: "",
                    password: "",
                    email: ""
                },

　　　

　　綁定規則

　　　用rules綁定規則：

　　　　rules里需要prop綁定的對象定義規則

　　　　規則參數

trigger{String | Array}：觸發校驗的方式有2種：
change：字段值發生變化時校驗
blur：輸入框失去焦點時觸發
如果同時監聽兩種方式，需要寫成數組形式：['change', 'blur']

required
布爾值，是否必填，配置此參數不會顯示輸入框左邊的必填星號，如需要，請配置u-form-item的required為true

pattern
要求此參數值為一個正則表達式，如： /\d+/，不能帶引號，如："/\d+/"，組件會對字段進行正則判斷，返回結果。

min
最小值，如果字段類型為字符串和數組，會取字符串長度與數組長度(length)與min比較，如果字段是數值，則直接與min比較。

max
最大值，規則同min參數

len
指定長度，規則同min，優先級高於min和max

enum{Array} 指定的值，配合 type: 'enum' 使用

whitespace{Boolean}
如果字段值內容都為空格，默認無法通過required: true校驗，如果要允許通過，需要將此參數設置為true

transform{Function}，校驗前對值進行轉換，函數的參數為當前值，返回值為改變后的值，參數如如下：

value：當前校驗字段的值
message
校驗不通過時的提示信息

validator{Function}：自定義同步校驗函數，參數如下：

rule：當前校驗字段在 rules 中所對應的校驗規則
value：當前校驗字段的值
callback：校驗完成時的回調，一般無需執行callback，返回true(校驗通過)或者false(校驗失敗)即可
asyncValidator{Function}：自定義異步校驗函數，參數如下：

rule：當前校驗字段在 rules 中所對應的校驗規則
value：當前校驗字段的值
callback：校驗完成時的回調，執行完異步操作(比如向后端請求數據驗證)，如果不通過，需要callback(new Error('提示錯誤信息'))，如果校驗通過，執行callback()即可

 

　　注冊規則api

// 必須要在onReady生命周期，因為onLoad生命周期組件可能尚未創建完畢
        onReady() {
            this.$refs.myForm.setRules(this.rules)
        }

　　

　　校驗規則api

　　　　this.$refs.uForm.validate(valid => {
                if (valid) {
                    console.log('驗證通過');
                } else {
                    console.log('驗證失敗');
                }
            });

 

　　總結： 

　　　　uView的表單驗證：--- 界面（<u-form> <u-form-item> <u-input> 三個包裹），綁定數據 :model , v-model、綁定規則 ref="規則對象"，prop="規則對象“，定義對象( form )和規則（rule），注冊和調用api

 

使用

<template>
    <view class="">
        <u-form :model="form" ref='myForm'>
            <u-form-item label="用戶名" prop="username" label-width="100rpx">
                <u-input v-model="form.username" type="string" placeholder="請輸入用戶名"></u-input>
            </u-form-item>
            <u-form-item label="密碼" prop="password">
                <u-input v-model="form.password" type="password" placeholder="請輸入密碼"></u-input>
            </u-form-item>
            <u-form-item label="郵箱" prop="email">
                <u-input v-model="form.email" type="email" placeholder="請輸入郵箱"></u-input>
            </u-form-item>
        </u-form>
        <button @click="submit">提交</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    username: "",
                    password: "",
                    email: ""
                },
                rules: {
                    username: [{
                        required: true,
                        message: "請輸入用戶名",
                        trigger: "change"
                    }],
                    password: [{
                        required: true,
                        message: "密碼不小於8位",
                        trigger: 'change',
                        min:8
                    }],
                    email: [{
                        required: true,
                        message: "請輸入郵箱",
                        trigger: "change"
                    }]
                }
            }
        },
        methods: {
            submit() {
                this.$refs.myForm.validate(valid => {
                    if (valid) {
                        console.log('驗證通過');
                    } else {
                        console.log('驗證失敗');
                    }
                });
            }
        },
        // 必須要在onReady生命周期，因為onLoad生命周期組件可能尚未創建完畢
        onReady() {
            this.$refs.myForm.setRules(this.rules)
        }
    };
</script>