<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.
js - 表单验证</title>
<link rel="stylesheet" href="https://cdn.
jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
<style>
input:focus {
outline: none;
box-shadow: 0 0 0 2px #67c23a;
}
</style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto py-16">
<h1 class="text-center text-4xl mb-8">Vue.
js - 表单验证</h1>
<div class="max-w-md mx-auto bg-white rounded shadow-md p-8">
<form>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="
username">用户名</label>
<input class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="
username" type="text" placeholder="请输入用户名" v-model="
username" @blur="
checkUsername">
<span v-if="
usernameError" class="text-red-600 text-sm">{{
usernameError }}</span>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="password">密码</label>
<input class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="请输入密码" v-model="password" @blur="
checkPassword">
<span v-if="passwordError" class="text-red-600 text-sm">{{ passwordError }}</span>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="email">电子邮件</label>
<input class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="请输入电子邮件" v-model="email" @blur="
checkEmail">
<span v-if="emailError" class="text-red-600 text-sm">{{ emailError }}</span>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="phone">电话</label>
<input class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="phone" type="tel" placeholder="请输入电话" v-model="phone" @blur="
checkPhone">
<span v-if="phoneError" class="text-red-600 text-sm">{{ phoneError }}</span>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="code">验证码</label>
<div class="flex">
<input class="appearance-none border rounded-l w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="code" type="text" placeholder="请输入验证码" v-model="code">
<button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-r" @click="refreshCode">刷新</button>
</div>
<span v-if="codeError" class="text-red-600 text-sm">{{ codeError }}</span>
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit" :disabled="hasError">提交</button>
</div>
</form>
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const randomCode = () => {
return Math.floor(Math.random() * (9999 - 1000 + 1)) + 1000;
};
const app = Vue.createApp({
data() {
return {
username: '',
password: '',
email: '',
phone: '',
code: '',
usernameError: '',
passwordError: '',
emailError: '',
phoneError: '',
codeError: ''
};
},
computed: {
hasError() {
return this.
usernameError || this.passwordError || this.emailError || this.phoneError || this.codeError;
}
},
methods: {
checkUsername() {
if (!this.
username) {
this.
usernameError = '用户名不能为空';
} else if (this.
username.length < 5 || this.
username.length > 20) {
this.
usernameError = '用户名必须为5~20个字符';
} else {
this.
usernameError = '';
}
},
checkPassword() {
if (!this.password) {
this.passwordError = '密码不能为空';
} else if (this.password.length < 6 || this.password.length > 16) {
this.passwordError = '密码必须为6~16个字符';
} else {
this.passwordError = '';
}
},
checkEmail() {
if (!this.email) {
this.emailError = '电子邮件不能为空';
} else if (!/\S+@\S+\.\S+/.test(this.email)) {
this.emailError = '电子邮件格式不正确';
} else {
this.emailError = '';
}
},
checkPhone() {
if (!this.phone) {
this.phoneError = '电话不能为空';
} else if (!/^\d{11}$/.test(this.phone)) {
this.phoneError = '电话格式不正确';
} else {
this.phoneError = '';
}
},
refreshCode() {
this.code = randomCode();
this.codeError = '';
}
},
mounted() {
this.refreshCode();
}
});
app.mount('#app');
</script>
</body>
</html>
扫一扫
1512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
