一、基础使用
<template>
// v-model 绑定 data 中的对象:form
// ref 主要用在注册方法上面
<u-form :model="form" ref="uForm">
/*
label设置左侧内容,label-width设置label的宽度,
prop很重要!是验证是否有效的重要属性。
且避坑点是,这个prop只能写在u-form-item标签里,写在u-input里无效
*/
<u-form-item
label="姓名"
label-width="80"
prop="name"
>
// v-model和data中的form对象中的name做绑定,input-align可以使input输入框的字体居右
<u-input v-model="form.name" input-align="right" placeholder="请输入姓名" />
</u-form-item>
<u-form-item
label="手机号"
label-width="80"
prop="phone"
>
<u-input v-model="form.name" input-align="right" placeholder="请输入姓名" />
</u-form-item>
<!-- 提交按钮 -->
<u-button
:custom-style="submitBtnStyle"
@click="submit"
>
提交
</u-button>
</u-form>
</template>
<script>
export default {
data() {
return {
form: {
name: 'thiStefan',
phone: '188',
},
// 提交按钮样式
submitBtnStyle: {
margin: "30rpx 0rpx 0rpx",
color: "#ffffff",
fontWeight: "550",
letterSpacing: "10rpx",
backgroundColor: "#00b8b4",
},
/*
rules规则是一个对象形式,rules对象下每一个prop绑定的规则是数组形式,
这个数组里,可以有多个对象,每个对象都可以设置不同的规则。
*/
rules: {
name:[
{
// 必填项
required: true,
// 提示内容(会出现在u-form-item内的底部)
message: "姓名不能为空",
// 触发方式(可选多种)
trigger:["change","blur"]
}
],
phone: [
{
required: true,
message: "请输入手机号",
trigger: ["blur"],
},
{
/*
u-form提供的可直接调用的js验证,
具体有哪些可以观看官方文档,这里就不在赘述了。
*/
validator: (rule, value, callback) => {
return this.$u.test.mobile(value);
},
message: "手机号格式不正确",
trigger: ["blur"],
},
],
}
}
},
/*
重要步骤,必须要通过u-form标签定义的ref名来设置验证。
setRules就是这个ref上面挂载的设置验证的方法。
可以console.log打出来看看这个ref到底包含了些什么。
*/
onReady() {
this.$refs.uForm.setRules(this.rules);
console.log(this.$refs.uForm);
},
methods() {
// 提交表单
submit() {
this.$refs.uForm.validate((valid) => {
if (valid) {
console.log("验证通过");
this.saveForm(); // 这里调用你保存数据的接口
return;
} else {
console.log("验证失败");
return;
}
});
},
},
}
</script>
二、picker组件的小坑
在用户点击submit提交按钮,走过uView rules的验证之后,且失败后,失败项再次填写后,这个未填提示依然会出现在那里。
方法:
1、通过判断picker中的view绑定的值,是否为空,决定是否显隐message未填提醒
当time不为空的时候,也就是用户选了时间的时候,通过picker的change事件再拿picker的dom,遍历dom的children,设置未填提示的dom的style为none。
<template>
<view class="demo">
<u-form :model="form" ref="uForm">
<u-form-item
label="发热时间"
label-width="160"
prop="time"
class="uFormItem-time"
>
<picker
mode="date"
@change="timeChange"
:start="startDate"
:end="endDate"
>
<view class="chooseDate">
{{ form.time || "请选择时间" }}
</view>
</picker>
</u-form-item>
</u-form>
</view>
</template>
<script>
export default {
data() {
return: {
form: {
time: "",
},
rules: {
time: [
{
required: true,
message: "时间不能为空"
trigger: ["blur", "change"]
}
]
}
}
},
onReady(){
this.$refs.uForm.setRules(this.rules);
console.log(this.$refs.uForm);
},
methods: {
timeChange(e) {
this.form.time = e.detail.value;
console.log("this.form.time:" + this.form.time);
if (this.form.time != "") {
let dom = document.getElementsByClassName("uFormItem-time")[0];
let child = dom.children;
child.forEach((item) => {
if (item.className == "u-form-item__message") {
item.style.display = "none";
}
});
}
},
},
};
</script>
2、使用v-model双向绑定picker下面的view
<picker
mode="date"
@change="timeChange"
:start="startDate"
:end="endDate"
>
<view class="chooseDate" v-model="form.time">
{{ form.time || "请选择时间" }}
</view>
</picker>