<!DOCTYPE html>
<html>
<head>
<title>表单校验示例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<style>
.error {
color: red;
font-size: 12px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2>登录表单</h2>
<form id="login-form" @submit.prevent="submitForm">
<div class="form-group">
<label for="username">用户名：</label>
<input v-model.trim="formData.username" type="text" class="form-control" required>
<span v-if="errors.username" class="error">{{ errors.username }}</span>
</div>
<div class="form-group">
<label for="password">密码：</label>
<input v-model="formData.password" type="password" class="form-control" required>
<span v-if="errors.password" class="error">{{ errors.password }}</span>
</div>
<button type="submit" class="btn btn-primary">登录</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#login-form',
data: {
formData: {
username: '',
password: ''
},
errors: {}
},
methods: {
submitForm: function() {
this.errors = {};
// 校验用户名
if (!this.formData.username) {
this.errors.username = "用户名不能为空";
} else if (/\s/.test(this.formData.username)) {
this.errors.username = "用户名不能包含空格";
} else if (!/^Hive\w{5,7}$/.test(this.formData.username)) {
this.errors.username = "用户名必须以Hive开头，长度为8-10位";
}
// 校验密码
if (!this.formData.password) {
this.errors.password = "密码不能为空";
} else if (/\s/.test(this.formData.password)) {
this.errors.password = "密码不能包含空格";
} else if (!/^Key\w{5,7}$/.test(this.formData.password.trim())) { this.errors.password = "密码必须以Key开头，长度为8-10位";
} else {
// 去除密码前面可能出现的空格
this.formData.password = this.formData.password.trim();
}
// 如果存在错误信息，则阻止表单提交
if (Object.keys(this.errors).length > 0) {
return;
}
// 表单校验通过，执行登录逻辑
alert('登录成功');
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="app" class="container">
<h2>用户表单</h2>
<form @submit.prevent="submitForm">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" class="form-control" id="username" v-model="username" @input="validateUsername">
<span class="text-danger" v-if="usernameError">{{ usernameError }}</span>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" class="form-control" id="password" v-model="password" @input="validatePassword">
<span class="text-danger" v-if="passwordError">{{ passwordError }}</span>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// Vue 实例
new Vue({
el: '#app',
data: {
username: '',
password: '',
usernameError: '',
passwordError: ''
},
methods: {
validateUsername() {
// this.username = this.username.trim(); //使得用户不能输入空格
// 使用正则表达式替换所有空格字符为空字符串。
// 这将移除字符串中所有位置的空格，包括中间的空格。
this.username = this.username.replace(/\s/g, '');
const regex = /^Hive.{4,6}$/;
if (!this.username) {
this.usernameError = '用户名不能为空';
} else if (!regex.test(this.username)) {
this.usernameError = '用户名必须以Hive开头且长度为8-10位';
} else {
this.usernameError = '';
}
},
validatePassword() {
this.password = this.password.trim();
const regex = /^Key.{4,6}$/;
if (!this.password) {
this.passwordError = '密码不能为空';
} else if (!regex.test(this.password)) {
this.passwordError = '密码必须以Key开头且长度为8-10位';
} else {
this.passwordError = '';
}
},
submitForm() {
this.validateUsername();
this.validatePassword();
if (!this.usernameError && !this.passwordError) {
alert('表单提交成功!');
// 这里可以添加提交表单的逻辑
}
}
}
});
</script>
</body>
</html>
function validateUsername(username) {
if (!username) {
return '用户名不能为空';
} else if (/\s/.test(username)) {
return '用户名不能包含空格';
} else if (!/^Hive.{4,6}$/.test(username)) {
return '用户名必须以Hive开头且长度为8-10位';
}
return '';
}
function validatePassword(password) {
if (!password) {
return '密码不能为空';
} else if (/\s/.test(password)) {
return '密码不能包含空格';
} else if (!/^Key.{4,6}$/.test(password)) {
return '密码必须以Key开头且长度为8-10位';
}
return '';
}
window.validateUsername = validateUsername;
window.validatePassword = validatePassword;
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="app" class="container">
<h2>用户表单</h2>
<form @submit.prevent="validateForm">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" class="form-control" id="username" v-model="username" @input="validateUsernameInput">
<span class="text-danger" v-if="usernameError">{{ usernameError }}</span>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" class="form-control" id="password" v-model="password" @input="validatePasswordInput">
<span class="text-danger" v-if="passwordError">{{ passwordError }}</span>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="/js/validata.js"></script>
<script>
new Vue({
el: '#app',
data: {
username: '',
password: '',
usernameError: '',
passwordError: ''
},
methods: {
validateUsernameInput() {
this.username = this.username.replace(/\s/g, '');
this.usernameError = validateUsername(this.username);
},
validatePasswordInput() {
this.password = this.password.replace(/\s/g, '');
this.passwordError = validatePassword(this.password);
},
validateForm() {
this.validateUsernameInput();
this.validatePasswordInput();
if (!this.usernameError && !this.passwordError) {
alert('表单提交成功!');
}
}
}
});
</script>
</body>
</html>
