最近项目中用到了uview 在做表单时用到了校验，发现校验不友好的结果·， 具体见文档uview 这里有对表单的详解，
<u-form :model="form" ref="uForm" label-width="140" label-align="right" style="width: 80%;">
<u-form-item>
<u-field v-model="mobile" @blur='getCode' maxlength="11" label="手机号:" placeholder="请填写手机号">
<u-button size="mini" slot="right" @click="getCode">验 证</u-button>
</u-field>
<view class="completed" v-if="completed">
您当前已完成注册和身份认证！！！
</view>
<view class="unverified" v-if='unverified' @click="authentication">
您当前尚未认证或认证过期,立即认证>>>
</view>
<view class="unregistered" v-if='unregistered'>
该手机号尚未注册，保存后将自动为注册！
</view>
</u-form-item>
<u-form-item label="姓名:" prop="name">
<u-input v-model="form.name" />
</u-form-item>
<u-form-item label="装车时间:" prop="uptime">
<u-input v-model="form.uptime" @click="show2 = true" :type="type" placeholder="请选择装车时间" />
<u-picker @confirm="uptime" v-model="show2" mode="time" :params="params"></u-picker>
</u-form-item>
<u-form-item label="选择地址" :border-bottom="false">
<view class="mapWrap">
<map style="width: 100%; height: 150px;" @click="chooseLocation" :latitude="latitude" :longitude="longitude"
:markers="covers">
</map>
</view>
</u-form-item>
<u-form-item label="详细地址:" prop="address">
<u-input v-model="form.address" disabled=true placeholder="请在地图中选择详细地点" />
</u-form-item>
<u-form-item label="装车磅单:" prop="uppic">
<view class="up-img">
<oss-upload :ossInfo="form.upossInfo" :img='form.src1' :spaces="form.spaces" @uploadSuccess="uploadSuccess1"></oss-upload>
</view>
</u-form-item>
<u-form-item label="装车磅数:" prop="uppoundage">
<u-input v-model="form.uppoundage" placeholder="请输入榜数 /吨" />
</u-form-item>
<u-form-item required label="货主:" prop="shipper">
<u-input disabled='true' v-model="form.shipper" placeholder="请输入货主" />
</u-form-item>
<u-form-item label="货物单价:" prop="goodsprice ">
<u-input v-model="form.goodsprice" placeholder="请输入货物单价 元/吨" />
</u-form-item>
<u-form-item label="货物种类:" prop="goods">
<u-input v-model="form.goods" :type="type" placeholder="请输入货物种类" @click="show4 = true" />
<u-select @confirm="goods" v-model="show4" :list="list"></u-select>
</u-form-item>
<u-form-item label="货物名称:" prop="goodsname">
<u-input v-model="form.goodsname" placeholder="请输入货物名称" />
</u-form-item>
<u-form-item label="运费单价:" prop="price">
<u-input v-model="form.price" placeholder="请输入运费单价 元/吨" />
</u-form-item>
<u-form-item label="卸车时间:" prop="downtime">
<u-input disabled='true' v-model="form.downtime" @click="show3 = true" placeholder="请选择卸车时间" />
<!-- <u-picker @confirm="downtime" v-model="show3" mode="time" :params="params"></u-picker> -->
</u-form-item>
<u-form-item label="卸车地点:" prop="downsite">
<u-input disabled='true' v-model="form.downsite" placeholder="卸车地点" />
<!-- <u-picker @confirm="downsite" v-model="show1" mode="region"></u-picker> -->
</u-form-item>
<u-form-item label="卸车磅单:" prop="downpic">
<view class="up-img">
<oss-upload :ossInfo="form.ossInfo" :img='form.src' :spaces="form.spaces" @uploadSuccess="uploadSuccess"></oss-upload>
</view>
</u-form-item>
<u-form-item label="卸车磅数:" prop="number">
<u-input v-model="form.downnumber" placeholder="请输入卸车榜数" />
</u-form-item>
<view class="button">
<u-button size="medium" @click="save" type="primary">保存</u-button>
<u-button size="medium" @click="send" :disabled='disable' :plain="true">发送合同</u-button>
</view>
</u-form>
这里注意 
ref指的是uForm prop指的是校验规则是的名字 form.uptime指的是动态绑定的值 。
data如下 ：
form: {
src1: '../../static/images/index/pic-2.png', // 装车
src: '../../static/images/index/pic-2.png', //卸车
goodsprice: '',
srcpound: "",
address: '',
downnumber: '',
downtime: '',
price: '',
goods: '',
shipper: '',
uppoundage: '',
goods: '',
phone: '',
name: '',
upsite: "",
downsite: '',
uptime: "",
itemid: '',
goodsname: '',
upossInfo: '',
ossInfo: '',
upspaces: '',
spaces: '',
uploadImg1: '',
uploadImg: ''
},
校验规则如下 ：
rules: {
name: [{
required: true,
message: '请输入姓名',
trigger: ['change', 'blur'],
}],
uptime: [{
required: true,
message: '请输入装车时间',
trigger: ['change', 'blur'],
}],
address: [{
required: true,
message: '请选择详细地点',
trigger: ['change', 'blur'],
}],
shipper: [{
required: true,
message: '请选择货主',
trigger: ['change', 'blur'],
}],
goodsprice: [{
required: true,
message: '请输入货物单价',
trigger: ['change', 'blur'],
},
{
pattern: /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/,
message: '请输入正确的货物价格',
trigger: ['change', 'blur'],
}
],
goods: [{
required: true,
message: '请选择货物种类',
trigger: ['change', 'blur'],
}],
goodsname: [{
required: true,
message: '请输入货物名称',
trigger: ['change', 'blur'],
}],
price: [{
required: true,
message: '请输入运费单价',
trigger: ['change', 'blur'],
},
{
pattern: /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/,
message: '请输入正确的运费单价',
trigger: ['change', 'blur'],
}
],
downtime: [{
required: true,
message: '请输入卸车时间',
trigger: ['change', 'blur'],
}],
downsite: [{
required: true,
message: '请输入卸车地',
trigger: ['change', 'blur'],
}],
src: [{
required: true,
message: '请输入上传照片',
trigger: ['change', 'blur'],
}],
downnumber: [{
required: true,
message: '请输入卸车磅数',
trigger: ['change', 'blur'],
}],
},
这里的校验规则是指非零的正数（包括小数），
onReady() {
this.$refs.uForm.setRules(this.rules);
},
在onready中调用一下 ，
this.$refs.uForm.validate(valid => {
if (valid) {
console.log('验证通过');
this.susend()
} else {
console.log('验证失败');
}
});
绑定事件触发校验规则， 然而事情并没有按照我的想法来实现，校验规则没有激发， 表单无校验，在文档中也没有找到解决方法， 只好用了别的校验方法，在原有的基础上进行变动。
1 准备文件
common.js 准备文件，然后在使用是引入即可 ，
这里是common.js的内容
let common = {
checkRules(params, rules) { //表单校验
for (let key in rules) {
let arr = rules[key]
for (let i = 0; i < arr.length; i++) {
let rule = arr[i],
val = params[key]===0?'0':params[key] || ''
if (rule.required && val==='') { //非空
uni.showToast({
title: rule.message,
icon: "none"
});
return false
}
if(rule.pattern && !rule.pattern.test(val)){ //正则
uni.showToast({
title: rule.message,
icon: "none"
});
return false
}
}
}
return true
}
}
module.exports = common
使用方法如下
let flag = this.$common.checkRules(this.form, this.rules)
引入之后绑定事件来出发校验， 这里的flag是布尔值，通过校验即是true，反之flase。 这里的形参直接写你之前的即可 。 也可以根据自己的需求来在rules中添加判断即可 。