记录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 } }) },

• « 上一篇：VUE中 [{…}, {…}, __ob__: Observer]的坑
• » 下一篇：电容专题：电容两端电压不能突变的理解