uniapp form表單validator函數校驗

嘗試了用uniapp的from以及uni-forms發現并不是特别好用，就在插件市場找了一個類似于element-ui的表單驗證元件，用法基本上和element-ui一緻，使用也比較友善

因為目前是用uni-app做小程式，小程式使用有幾個限制，需要注意一下；

一、使用

      依賴于async-validator

    npm install async-validator --save

    npm下載下傳依賴，插件市場導入插件即可直接使用

先上代碼

HTML：

<evan-form :model="formData" ref="form">
        <text class="tips">電郵/手機號碼</text>
        <evan-form-item key="phone" prop="phone">
                <drop-down @onClick="dropDownChange" class="drop-down" :current="currentIndex" :list="areaCode"></drop-down>
                <input class="form-input" type="number" maxlength="11" placeholder-class="form-input-placeholder" v-model="formData.phone" placeholder="請輸入電郵/手機號碼" />
        </evan-form-item>
        <text class="tips tips-bottom" style="padding-top: 40rpx;padding-bottom: 0;">密碼</text>
        <evan-form-item key="phone" prop="passwords">
                <input class="form-input" type="password" placeholder-class="form-input-placeholder" v-model="formData.passwords" placeholder="請輸入密碼" />
        </evan-form-item>
        <view @click="goForgetPass" class="forget-password"><text>忘記密碼</text></view>
    </evan-form>
    <view class="submit-btn">
        <button @click="submit" class="btn login" size="mini" type="default">登錄</button>
        <view class="submit-or"><text>或</text></view>
        <button @click="goRegister" class="btn register" size="mini" type="default">註冊</button>
    </view>

js：

    data(){
        return{
            formData: {
                    phone: '',
                    passwords: ''
                },
            rules: {
                phone: [
                    {
                        required: true,
                        message: '請輸入電郵/手機號碼'
                    },
                    {
                        validator: this.isMobile
                    },
                    {
                        validator: (rule, value, callback) => {
                            // 注意這裡如果用的是methods裡的isMobilePhone将不生效
                            if (this.$utils.isMobilePhone(value)) {
                                    callback()
                            } else {
                                    callback(new Error('手機号格式不正确'))
                            }
                        }
                    },
                ],
                passwords: [
                    {
                        required: true,
                        message: '請輸入密碼'
                    }
                
            },
        }
    },
     
    mounted() {
        this.$refs.form.setRules(this.rules);
    },
    methods:{
     
        isMobile(rule, value, callback) {
            let phonePattern = /^\d{8}$/; //8位數正則
            let chPhonePattern = /^\d{11}$/; //11位數正則
            if (this.currentIndex !== 3) {
                if (phonePattern.test(value) === false) {
                    callback(new Error('請輸入8位正確的手機號碼'));
                } else {
                    callback();
                }
            } else if (this.currentIndex === 3) {
                if (chPhonePattern.test(value) === false) {
                    callback(new Error('請輸入11位正確的手機號碼'));
                } else {
                    callback();
                }
             else {
                callback();
            }
        },
        dropDownChange(index) {
            this.currentIndex = index;
        },
        submit(){
            this.$refs.form.validate(res=>{
                console.log(res)
            })
        }
    }
           

大概效果就是這個樣子，在使用validator的時候，一定要注意，正則校驗不管是true還是false，callback()一定要寫上，不然不會往下執行，接下來的校驗将失效；

二、特别注意點

1. 由于小程式等的限制，不能傳遞function（會變成一個空對象），如果使用到了自定義校驗validator，rules不通過props的方式傳遞，而是通過調用執行個體方法的方式傳遞，并且調用方法需放在mounted生命周期中，不然在h5以及支付寶小程式等下會報錯，如果沒有使用到了自定義校驗validator，則依然可以通過prop的方式傳遞（v2.1.0開始支援）

mounted() {
            // 這裡必須放在mounted中，不然h5，支付寶小程式等會找不到this.$refs.form
            this.$nextTick(() => {
                this.$refs.form.setRules(this.rules)
            })
        }
           

 2. 由于小程式等的限制，不能傳遞正規表達式，是以如果通過prop方式傳遞rules，并且使用到pattern正則校驗的時候需要通過string方式傳遞，需要将兩邊的斜杠去除，并且内部的斜杠需要變成雙斜杠，具體可以參考demo中的正則校驗

{
                pattern: '^1\\d{10}$',
                message: '手機号格式不正确'
            }
           

3. rules中在validator方法中調用目前methods下的方法會報錯，可提前将方法注入，或者validator直接調用methods中的方法

data(){
            return{
                rules:{
                    phone: [{
                        required: true,
                        message: '請輸入手機号'
                    },
                    {
                        validator: (rule, value, callback) => {
                            // 注意這裡如果用的是methods裡的isMobilePhone将不生效
                            if (this.$utils.isMobilePhone(value)) {
                                callback()
                            } else {
                                callback(new Error('手機号格式不正确'))
                            }
                        }
                    }]
                }
            }
        }

        data(){
            return{
                rules:{
                    phone: [{
                        required: true,
                        message: '請輸入手機号'
                    },
                    {
                        validator: this.isMobilePhone
                    }]
                }
            }
        },
        methods:{
            isMobilePhone(rule,value,callback){
                if (this.$utils.isMobilePhone(value)) {
                    callback()
                } else {
                    callback(new Error('手機号格式不正确'))
                }
            }
        }
           

4. 表單的内容需要初始化

data(){
            return{
                info:{
                    name: '',
                    email: '',
                    desc: '',
                    phone: ''
                }
            }
        }
           

詳細使用以及詳細demo請前往uni-app插件市場，

插件位址：https://ext.dcloud.net.cn/plugin?id=1137

Demo位址：https://github.com/EvanMaFYH/evan-form