尝试了用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