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