记录uniapp中表单校验踩的坑(uView框架)
记录uniapp中表单校验踩的坑(uView框架)
·
1.html结构
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
<u-form-item prop="phone">
<view class="cu-form-group">
<text class=" cuIcon-mobilefill text-green"></text> <text style="margin-left: 8px;"></text>
<u-input class="title" placeholder="请输入手机号" v-model="form.phone" type="text"
confirm-type="search" @confirm="doSearch1" :focus="isFocus1" maxlength="11" />
</view>
</u-form-item>
<u-form-item prop="users">
<view class="cu-form-group">
<u-icon name="man-add-fill" size="22" color="#f29100"></u-icon><text
style="margin-left: 3px;"></text>
<u-input class="title" placeholder="请输入联系人" v-model="form.users" type="text"
confirm-type="search" @confirm="doSearch1" :focus="isFocus1" />
</view>
</u-form-item>
<u-form-item prop="names">
<view class="cu-form-group">
<u-icon name="tags-fill" size="20" color="#2979ff"></u-icon><text
style="margin-left: 5px;"></text>
<u-input class="title" placeholder="请输入公司名称" v-model="form.names" type="text"
confirm-type="search" @confirm="doSearch1" :focus="isFocus1" />
</view>
</u-form-item>
<u-form-item prop="email">
<view class="cu-form-group">
<u-icon name="email-fill" size="20" color="#82848a"></u-icon><text
style="margin-left: 5px;"></text>
<u-input class="title" placeholder="请输入电子邮箱" v-model="form.email" type="text"
confirm-type="search" @confirm="doSearch1" :focus="isFocus1" />
</view>
</u-form-item>
<u-form-item prop="check">
<view class="cu-form-group">
<text class=" cuIcon-comment text-green" style="margin-right: 7px;"></text>
<u-input class="title" placeholder="请输入验证码" v-model="form.check" type="text"
confirm-type="search" @confirm="doSearch1" :focus="isFocus1" />
<button class="cu-btn bg-blue xs" v-if="flagTime" @click="checkMsg">发送验证码</button>
<text class="cu-btn bg-grey border" v-else>{{times}}秒后重新获取</text>
</view>
</u-form-item>
</u--form>
2. data设置rlues
form: {
phone: '',
users: '',
names: '',
email: '',
check: ''
},
rules: {
phone: [{
required: true,
message: "请输入手机号",
trigger: ["blur", "change"],
},
// uniapp自带的手机号验证规则
{
validator: (rule, value, callback) => {
if (value) {
return this.$u.test.mobile(value);
} else {
return true
}
},
message: "手机号格式不正确",
trigger: ["blur", "change"],
},
],
users: [{
required: true,
message: "请输入联系人",
trigger: ["blur", "change"],
}],
names: [{
required: true,
message: "请输入公司名称",
trigger: ["blur", "change"],
}],
email: [{
required: true,
message: "请输入电子邮箱",
trigger: ["blur", "change"],
},
// 自己定义的邮箱验证规则
{
validator: (rule, value, callback) => {
if (value) {
var myReg =
/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if (!myReg.test(value)) {
return false
} else {
return true
}
} else {
return true
}
},
message: "邮箱格式不正确",
trigger: ["blur", "change"],
}],
check: [{
required: true,
message: "请输入验证码",
trigger: ["blur", "change"],
},
// 自己定义的验证码验证规则
{
validator: (rule, value, callback) => {
if (value) {
if (value.length > 6) {
return false
} else {
return true
}
} else {
return true
}
},
message: "验证码格式不正确",
trigger: ["blur", "change"],
}]
}
3.方法里整体验证和请求接口
// 表单整体校验
async registerFun() {
// this.$refs.uForm 拿到ref上挂载的dom元素,也就是form,你在u--form里定义的ref等于什么,这个this.$refs.就是什么
let valid = await this.$refs.uForm.validate()
if (valid) {
//调用接口方法
this.register()
} else {
uni.showToast({
icon: 'none',
position: 'bottom',
title: '您输入的信息有误'
})
}
},
// 注册
async register() {
const token = uni.getStorageSync('token')
var url = 'userRegister'
var method = 'POST'
var params = {
token: token,
company: this.form.names,
email: this.form.email,
name: this.form.users,
phone: this.form.phone,
yzm: this.form.check
}
await request(url, method, params).then((res) => {
console.log(res.data)
if(res.data.code!=10000){
uni.showToast({
icon: 'none',
title: res.data.message
});
}else{
uni.showToast({
title: '注册成功'
});
this.listIndex=0
}
})
},
更多推荐
已为社区贡献3条内容
所有评论(0)