Skip to content

C
cust-app
Commit 161001ea authored by 罗林杰's avatar 罗林杰
Browse files
Options

修改表单校验

parent f0fbca24
Hide whitespace changes
Inline Side-by-side
Showing with 237 additions and 180 deletions
pagesme/me/updateBasicInformation.vue
View file @ 161001ea
......@@ -9,21 +9,24 @@
labelPosition="left"
:model="userInfo"
labelWidth="90"
ref="uForm"
:rules="rules"
>
<u-form-item
label="手机号"
prop="userInfo.memPhone"
prop="memPhone"
borderBottom
>
<u--input
v-model="userInfo.memPhone"
border="none"
placeholder="请输入手机号"
maxlength="11"
></u--input>
</u-form-item>
<u-form-item
label="微信号"
prop="userInfo.memWxCode"
prop="memWxCode"
borderBottom
>
<u--input
......@@ -34,7 +37,7 @@
</u-form-item>
<u-form-item
label="民族"
prop="userInfo.memNationText"
prop="form.memNationText"
borderBottom
@click="showNation = true; hideKeyboard()"
>
......@@ -52,7 +55,7 @@
</u-form-item>
<u-form-item
label="昵称"
prop="userInfo.memNickName"
prop="memNickName"
borderBottom
>
<u--input
......@@ -63,7 +66,7 @@
</u-form-item>
<u-form-item
label="性别"
prop="userInfo.memSex"
prop="form.memSexText"
borderBottom
@click="showSex = true; hideKeyboard()"
>
......@@ -81,7 +84,7 @@
</u-form-item>
<u-form-item
label="生日"
prop="userInfo.memBirthday"
prop="memBirthday"
borderBottom
@click="showBirthday = true; hideKeyboard()"
>
......@@ -99,7 +102,7 @@
</u-form-item>
<u-form-item
label="星座"
prop="userInfo.memConstellation"
prop="form.memConstellationText"
borderBottom
>
<u--input
......@@ -112,7 +115,7 @@
</u-form-item>
<u-form-item
label="身高"
prop="userInfo.memHeight"
prop="memHeight"
borderBottom
>
<u--input
......@@ -120,12 +123,15 @@
disabledColor="#ffffff"
placeholder="请输入身高"
border="none"
type="digit"
maxlength="3"
@input="limitHeightNum"
></u--input>
<span slot="right">cm</span>
</u-form-item>
<u-form-item
label="体重"
prop="userInfo.memWeight"
prop="memWeight"
borderBottom
>
<u--input
......@@ -133,12 +139,15 @@
disabledColor="#ffffff"
placeholder="请输入体重"
border="none"
type="digit"
maxlength="3"
@input="limitWeightNum"
></u--input>
<span slot="right">kg</span>
</u-form-item>
<u-form-item
label="教育经历"
prop="userInfo.memMaxEducation"
prop="form.memMaxEducationText"
borderBottom
@click="showEducation = true; hideKeyboard()"
>
......@@ -156,7 +165,7 @@
</u-form-item>
<u-form-item
label="毕业院校"
prop="userInfo.memCollege"
prop="memCollege"
borderBottom
>
<u--input
......@@ -167,7 +176,7 @@
</u-form-item>
<u-form-item
label="职业"
prop="userInfo.memCareer"
prop="memCareer"
borderBottom
>
<u--input
......@@ -178,7 +187,7 @@
</u-form-item>
<u-form-item
label="年收入"
prop="userInfo.memYearIncome"
prop="memYearIncome"
borderBottom
>
<u--input
......@@ -190,7 +199,7 @@
</u-form-item>
<u-form-item
label="工作单位"
prop="userInfo.memWorkPlace"
prop="memWorkPlace"
borderBottom
>
<u--input
......@@ -201,7 +210,7 @@
</u-form-item>
<u-form-item
label="居住地"
prop="userInfo.memResidenceProvince"
prop="form.memResidence"
borderBottom
@click="showResidence = true; hideKeyboard()"
>
......@@ -219,7 +228,7 @@
</u-form-item>
<u-form-item
label="籍贯"
prop="userInfo.memResidenceCity"
prop="form.memNative"
borderBottom
@click="showNative = true; hideKeyboard()"
>
......@@ -237,40 +246,40 @@
</u-form-item>
<u-form-item
label="自我介绍"
prop="userInfo.memIntroduce"
prop="memIntroduce"
borderBottom
>
<u--textarea v-model="userInfo.memIntroduce" placeholder="请输入自我介绍"></u--textarea>
</u-form-item>
<u-form-item
label="兴趣爱好"
prop="userInfo.memHobby"
prop="memHobby"
borderBottom
>
<u--textarea v-model="userInfo.memHobby" placeholder="请输入兴趣爱好" ></u--textarea>
</u-form-item>
<u-form-item
label="未来规划"
prop="userInfo.memFuturePlan"
prop="memFuturePlan"
borderBottom
>
<u--textarea v-model="userInfo.memFuturePlan" placeholder="请输入未来规划" ></u--textarea>
</u-form-item>
<u-form-item
label="期待"
prop="userInfo.memHalfDesire"
prop="memHalfDesire"
borderBottom
>
<u--textarea v-model="userInfo.memHalfDesire" placeholder="请输入期待" ></u--textarea>
</u-form-item>
<u-form-item
label="婚姻状况"
prop="userInfo.memMarriage"
prop="form.memMarriageText"
borderBottom
@click="showMarriage = true; hideKeyboard()"
>
<u--input
v-model="userInfo.memMarriage"
v-model="form.memMarriageText"
disabled
disabledColor="#ffffff"
placeholder="请选择婚姻状况"
......@@ -283,7 +292,7 @@
</u-form-item>
<u-form-item
label="婚姻状况备注"
prop="userInfo.memMarriageRemarks"
prop="memMarriageRemarks"
borderBottom
>
<u--input
......@@ -294,7 +303,7 @@
</u-form-item>
<u-form-item
label="16型人格"
prop="userInfo.memMbti"
prop="memMbti"
borderBottom
>
<u--input
......@@ -316,18 +325,12 @@
customStyle="margin-top: 10px;margin-bottom:50px"
@click="reset"
></u-button>
<u-code
ref="uCode"
@change="codeChange"
seconds="20"
@start="disabled1 = true"
@end="disabled1 = false"
></u-code>
<!-- 生日-->
<u-datetime-picker
:show="showBirthday"
:value="birthday"
mode="date"
:minDate="-1420070400000"
:maxDate="birthday"
closeOnClickOverlay
@confirm="confirmBirthday"
@cancel="showBirthday=false"
......@@ -423,20 +426,13 @@ export default {
}]
],
//选择器
showAge: false,
showSex: false,
showHeight: false,
showCalendar: false,
showBirthday: false,
showEducation: false,
showCareer: false,
showMarriage:false,
showNation:false,
showResidence: false,
showNative: false,
disabled1: false,
tips: '',
value: '',
userInfo: {
nickname:'',//昵称
memPhone:'',//手机号
......@@ -467,158 +463,220 @@ export default {
form:{},
birthday: Number(new Date()),
rules: {
'userInfo.name': [{
type: 'string',
required: true,
message: '请填写姓名',
trigger: ['blur', 'change']
}, {
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
validator: (rule, value, callback) => {
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
return uni.$u.test.chinese(value);
memPhone: [
{
type: 'number',
required: true,
message: '请输入手机号',
trigger: ['blur']
},
message: "姓名必须为中文",
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
trigger: ["change", "blur"],
}],
code: {
type: 'string',
required: true,
len: 4,
message: '请填写4位验证码',
trigger: ['blur']
},
'userInfo.sex': {
type: 'string',
max: 1,
required: true,
message: '请选择男或女',
trigger: ['blur', 'change']
},
radiovalue1: {
type: 'string',
min: 1,
max: 2,
message: '橙子有毒',
trigger: ['change']
},
checkboxValue1: {
type: 'array',
min: 2,
required: true,
message: '不能太宅，至少选两项',
trigger: ['change']
},
intro: {
type: 'string',
min: 3,
required: true,
message: '不低于3个字',
trigger: ['change']
},
hotel: {
type: 'string',
min: 2,
required: true,
message: '请选择住店时间',
trigger: ['change']
},
'userInfo.birthday': {
type: 'string',
required: true,
message: '请选择生日',
trigger: ['change']
},
},
radiolist1: [{
name: '苹果',
disabled: false
},
{
name: '香蕉',
disabled: false
},
{
name: '毒橙子',
disabled: false
}
],
checkboxList1: [{
name: '羽毛球',
disabled: false
},
{
name: '跑步',
disabled: false
},
{
name: '爬山',
disabled: false
}
]
{
pattern: /^1[3-9]\d{9}$/,
message: '请输入正确的手机号',
trigger: ['blur']
}
],
memWxCode: [
{
type: 'string',
required: true,
message: '请输入微信号',
trigger: ['blur']
}
],
'form.memNationText': [
{
type: 'string',
required: true,
message: '请选择民族',
trigger: ['change']
}
],
memNickName: [
{
type: 'string',
required: true,
message: '请输入昵称',
trigger: ['blur']
}
],
'form.memSexText': [
{
type: 'string',
required: true,
message: '请选择性别',
trigger: ['change']
}
],
memBirthday: [
{
type: 'string',
required: true,
message: '请选择生日',
trigger: ['change']
}
],
memHeight: [
{
type: 'number',
required: true,
message: '请输入身高',
trigger: ['blur']
}
],
memWeight: [
{
type: 'number',
required: true,
message: '请输入体重',
trigger: ['blur']
}
],
'form.memMaxEducationText': [
{
type: 'string',
required: true,
message: '请选择教育经历',
trigger: ['change']
}
],
memCollege: [
{
type: 'string',
required: true,
message: '请输入毕业院校',
trigger: ['blur']
}
],
memYearIncome: [
{
type: 'number',
required: true,
message: '请输入年收入',
trigger: ['blur']
}
],
'form.memResidence': [
{
type: 'string',
required: true,
message: '请选择居住地',
trigger: ['change']
}
],
'form.memNative': [
{
type: 'string',
required: true,
message: '请选择籍贯',
trigger: ['change']
}
],
memIntroduce: [
{
type: 'string',
required: true,
message: '请输入自我介绍',
trigger: ['blur']
}
],
memHobby: [
{
type: 'string',
required: true,
message: '请输入兴趣爱好',
trigger: ['blur']
}
],
memFuturePlan: [
{
type: 'string',
required: true,
message: '请输入未来规划',
trigger: ['blur']
}
],
memHalfDesire: [
{
type: 'string',
required: true,
message: '请输入期待',
trigger: ['blur']
}
],
'form.memMarriageText': [
{
type: 'string',
required: true,
message: '请选择婚姻状况',
trigger: ['change']
}
]
}
}
},
onReady() {
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
// this.$refs.form1.setRules(this.rules)
},
onLoad() {
this.getHeight()
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
this.$refs.uForm.setRules(this.rules)
},
methods: {
confirmMarriage(e){
this.showMarriage = false
this.userInfo.memMarriage = e.value
this.userInfo.memMarriage = e.value[0].value
this.form.memMarriageText = e.value[0].label
},
confirmEducation(e){
this.showEducation = false
this.userInfo.memMaxEducation = e.value
this.form.memMaxEducationText = e.data
this.userInfo.memMaxEducation = e.value[0].value
this.form.memMaxEducationText = e.value[0].label
},
confirmBirthday(e) {
this.showBirthday = false
this.userInfo.memBirthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
this.getConstellation(value)
console.log('this.userInfo.memBirthday',this.userInfo.memBirthday)
this.getConstellation(this.userInfo.memBirthday)
},
getConstellation (value) {
const month = value.getMonth() + 1 // 月份是从0开始的，+1修正
const day = value.getDate()
const [year, month, day] = value.split('-').map(Number);
const dateObject = new Date(year, month - 1, day); // 注意：月份需要减1，因为JS中月份是从0开始计算的
const formattedMonth = dateObject.getMonth() + 1; // 获取正确的月份，+1是因为构造Date时减了1
const dayInMonth = dateObject.getDate();
if ((month === 1 && day >= 20) || (month === 2 && day <= 18)) {
this.form.memConstellation = 1
if ((formattedMonth === 1 && dayInMonth >= 20) || (formattedMonth === 2 && dayInMonth <= 18)) {
this.userInfo.memConstellation = 1
this.form.memConstellationText = '水瓶座'
} else if ((month === 2 && day >= 19) || (month === 3 && day <= 20)) {
} else if ((formattedMonth === 2 && dayInMonth >= 19) || (formattedMonth === 3 && dayInMonth <= 20)) {
this.form.memConstellation = 2
this.form.memConstellationText = '双鱼座'
} else if ((month === 3 && day >= 21) || (month === 4 && day <= 19)) {
} else if ((formattedMonth === 3 && dayInMonth >= 21) || (formattedMonth === 4 && dayInMonth <= 19)) {
this.form.memConstellation = 3
this.form.memConstellationText = '白羊座'
} else if ((month === 4 && day >= 20) || (month === 5 && day <= 20)) {
} else if ((formattedMonth === 4 && dayInMonth >= 20) || (formattedMonth === 5 && dayInMonth <= 20)) {
this.form.memConstellation = 4
this.form.memConstellationText = '金牛座'
} else if ((month === 5 && day >= 21) || (month === 6 && day <= 20)) {
} else if ((formattedMonth === 5 && dayInMonth >= 21) || (formattedMonth === 6 && dayInMonth <= 20)) {
this.form.memConstellation = 5
this.form.memConstellationText = '双子座'
} else if ((month === 6 && day >= 21) || (month === 7 && day <= 22)) {
} else if ((formattedMonth === 6 && dayInMonth >= 21) || (formattedMonth === 7 && dayInMonth <= 22)) {
this.form.memConstellation = 6
this.form.memConstellationText = '巨蟹座'
} else if ((month === 7 && day >= 23) || (month === 8 && day <= 22)) {
} else if ((formattedMonth === 7 && dayInMonth >= 23) || (formattedMonth === 8 && dayInMonth <= 22)) {
this.form.memConstellation = 7
this.form.memConstellationText = '狮子座'
} else if ((month === 8 && day >= 23) || (month === 9 && day <= 22)) {
} else if ((formattedMonth === 8 && dayInMonth >= 23) || (formattedMonth === 9 && dayInMonth <= 22)) {
this.form.memConstellation = 8
this.form.memConstellationText = '处女座'
} else if ((month === 9 && day >= 23) || (month === 10 && day <= 22)) {
} else if ((formattedMonth === 9 && dayInMonth >= 23) || (formattedMonth === 10 && dayInMonth <= 22)) {
this.form.memConstellation = 9
this.form.memConstellationText = '天秤座'
} else if ((month === 10 && day >= 23) || (month === 11 && day <= 21)) {
} else if ((formattedMonth === 10 && dayInMonth >= 23) || (formattedMonth === 11 && dayInMonth <= 21)) {
this.form.memConstellation = 10
this.form.memConstellationText = '天蝎座'
} else if ((month === 11 && day >= 22) || (month === 12 && day <= 21)) {
} else if ((formattedMonth === 11 && dayInMonth >= 22) || (formattedMonth === 12 && dayInMonth <= 21)) {
this.form.memConstellation = 11
this.form.memConstellationText = '射手座'
} else if ((month === 12 && day >= 22) || (month === 1 && day <= 19)) {
} else if ((formattedMonth === 12 && dayInMonth >= 22) || (formattedMonth === 1 && dayInMonth <= 19)) {
this.form.memConstellation = 12
this.form.memConstellationText = '摩羯座'
}
......@@ -653,44 +711,43 @@ export default {
// 更新城市列表为当前选中省份的城市列表
this.$set(this.nativeActions, 1, e.value[0].children);
},
formatter(day) {
const d = new Date()
let month = d.getMonth() + 1
const date = d.getDate()
if (day.month == month && day.day == date + 3) {
day.bottomInfo = '有优惠'
day.dot = true
}
return day
},
codeChange(text) {
this.tips = text;
},
calendarClose() {
this.showCalendar = false
this.$refs.form1.validateField('hotel')
},
submit() {
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
this.$refs.form1.validate().then(res => {
this.$refs.uForm.validate().then(res => {
uni.$u.toast('校验通过')
}).catch(errors => {
uni.$u.toast('校验失败')
})
},
reset() {
const validateList = ['userInfo.name', 'userInfo.sex', 'radiovalue1', 'checkboxValue1', 'intro',
'hotel', 'code', 'userInfo.birthday']
this.$refs.form1.resetFields()
this.$refs.form1.clearValidate()
setTimeout(()=>{
this.$refs.form1.clearValidate(validateList)
// 或者使用 this.$refs.form1.clearValidate()
},10)
},
hideKeyboard() {
uni.hideKeyboard()
}
},
limitHeightNum (value) {
if (value) {
const num = parseInt(value, 10)
if (num < 0) {
this.userInfo.memHeight = 0
} else if (num > 250) {
this.userInfo.memHeight = 250
} else {
this.userInfo.memHeight = num
}
}
},
limitWeightNum (value) {
if (value) {
const num = parseInt(value, 10)
if (num < 0) {
this.userInfo.memWeight = 0
} else if (num > 250) {
this.userInfo.memWeight = 250
} else {
this.userInfo.memWeight = num
}
}
},
},
}
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment