尝试了用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插件市场，
