uniapp-uview的表单校验——同步,异步,图片必输,数字校验爬坑
uniapp-uview的表单校验——同步,异步,图片必输,数字校验爬坑
·
<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) => {
// 上面有说,返回true表示校验通过,返回false表示不通过
// this.$u.test.mobile()就是返回true或者false的,uview自带的校验方法,此处也可以自己写校验函数
return this.$u.test.mobile(value) || this.$u.test.landline(value);
},
message: '请输入xxx-xxxx或者手机号',
// 触发器可以同时用blur和change
trigger: ['change', 'blur'],
},{
//异步校验,checkHandle为请求后台的函数,跟后台约定状态码为400则校验不通过
asyncValidator: (rule, value, callback) => {
this.checkHandle(value, (res) => {
if (res.code == 400) {
// 如果验证不通过,需要在callback()抛出new Error('错误提示信息')
callback(new Error('电话已存在,请更换'));
} else {
// 如果校验通过,也要执行callback()回调
callback();
}
})
},
trigger: ['blur'],
}
],
touxiang: [
{
validator: (rule, value, callback) => {
if (!this.form.avatarUrl) {
return false
} else {
return true
}
},
message: '请上传头像',
trigger: ['change', 'blur'],
}
],
num: [
{
required: true,
//测试发现,当input框限定type为number时,在修改的场景下,即便输入框有默认值,也会报空不通过校验
//给rules添加transform转为字符可解决报错,猜测应该是类型不匹配造成的验证不通过
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'],
}
更多推荐
已为社区贡献8条内容
所有评论(0)