<u-form :model="form" ref="uForm">
<u-form-item label="电话" prop="faPhone">
<u-input maxlength="20" v-model="form.faPhone" placeholder="请输入电话" />
</u-form-item>
<u-form-item label="头像" prop="touxiang">
<u-upload :action="actionAvatar" ref="touxiang" width="200" height="142" :custom-btn="true"
del-bg-color="#666666" max-count="1" :limitType="['png', 'jpg']" @on-success="onChange" :before-remove="deleteImg">
<view slot="addBtn" class="slot-btn">
<view class="addBox">
<u-icon name="camera" size="60" color="#c0c4cc"></u-icon>
<view class="">
选择图片
</view>
</view>
</view>
</u-upload>
</u-form-item>
<u-form-item label="需求总量" prop="num">
<!-- 测试发现,当input框限定type为number时,在修改的场景下,即便输入框有默认值,也会报空不通过校验 -->
<u-input v-model="form.num" type="number" placeholder="请输入所需需求总量" />
</u-form-item>
</u-form>
export default {
data(){
return {
rules:{
faPhone: [
{
validator: (rule, value, callback) => {
return this.$u.test.mobile(value) || this.$u.test.landline(value);
},
message: '请输入xxx-xxxx或者手机号',
trigger: ['change', 'blur'],
},{
asyncValidator: (rule, value, callback) => {
this.checkHandle(value, (res) => {
if (res.code == 400) {
callback(new Error('电话已存在,请更换'));
} else {
callback();
}
})
},
trigger: ['blur'],
}
],
touxiang: [
{
validator: (rule, value, callback) => {
if (!this.form.avatarUrl) {
return false
} else {
return true
}
},
message: '请上传头像',
trigger: ['change', 'blur'],
}
],
num: [
{
required: true,
transform(value) {
return String(value);
},
message: '请输入总量',
trigger: ['change', 'blur'],
}
],
}
}
},
mounted() {
this.$refs.uForm.setRules(this.rules);
},
methods:{
onChange(res, index, lists, name) {
this.form.avatarUrl = res.avatarUrl;
},
deleteImg(){
this.form.avatarUrl = '';
}
}
}
.slot-btn {
width: 200rpx;
height: 142rpx;
background: rgb(244, 245, 246);
border: 2rpx dashed #D0D0D0;
text-align: center;
font-size: 24rpx;
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-weight: 400;
color: #999999;
line-height: 36rpx;
}
.addBox {
position: relative;
top: 50%;
transform: translateY(-50%);
}
{
pattern: /^[0-9a-zA-Z]*$/g,
// 正则检验前先将值转为字符串
transform(value) {
return String(value);
},
message: '只能包含字母或数字',
trigger: ['blur', 'change'],
}