47 lines
1.1 KiB
Vue
47 lines
1.1 KiB
Vue
<template>
|
|
<view class="form-wrapper">
|
|
<view class="form-header">
|
|
<image class="form-icon" src="./images/icon_minus.png"></image>
|
|
<text class="form-title">游客1</text>
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="form-label">姓 名</text>
|
|
<input class="form-input" v-model="name" placeholder="请输入姓名" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="form-label">手机号</text>
|
|
<input
|
|
class="form-input"
|
|
v-model="phone"
|
|
placeholder="请输入手机号"
|
|
@blur="validatePhone"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
// Local state
|
|
const name = ref("");
|
|
const phone = ref("");
|
|
const phoneError = ref("");
|
|
|
|
// Methods
|
|
const validatePhone = () => {
|
|
const phoneRegex = /^1[3-9]\d{9}$/;
|
|
if (!phone.value) {
|
|
phoneError.value = "手机号不能为空";
|
|
} else if (!phoneRegex.test(phone.value)) {
|
|
phoneError.value = "请输入正确的手机号";
|
|
} else {
|
|
phoneError.value = "";
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style>
|