使用jQuery/Vue验证用户名和密码不能为空,用户名和密码必须在6-16个字符之间
时间: 2024-02-01 16:13:34 浏览: 24
使用jQuery进行验证:
```html
<form id="myForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username"/>
<label for="password">Password:</label>
<input type="password" id="password" name="password"/>
<button type="submit">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('#myForm').submit(function(event) {
var username = $('#username').val();
var password = $('#password').val();
if (username.length < 6 || username.length > 16) {
alert('Username must be between 6 and 16 characters.');
event.preventDefault();
}
if (password.length < 6 || password.length > 16) {
alert('Password must be between 6 and 16 characters.');
event.preventDefault();
}
});
});
</script>
```
使用Vue进行验证:
```html
<template>
<form @submit.prevent="submitForm">
<label for="username">Username:</label>
<input v-model.trim="username" type="text" id="username" name="username"/>
<label for="password">Password:</label>
<input v-model.trim="password" type="password" id="password" name="password"/>
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
submitForm() {
if (this.username.length < 6 || this.username.length > 16) {
alert('Username must be between 6 and 16 characters.');
return;
}
if (this.password.length < 6 || this.password.length > 16) {
alert('Password must be between 6 and 16 characters.');
return;
}
// Submit form
}
}
}
</script>
```