在 JavaScript 中,可以使用以下方法進行表單驗證:
required
、minlength
、maxlength
、pattern
等。這些屬性可以直接添加到表單元素中,以實現基本的驗證功能。例如:<form>
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" required minlength="3" maxlength="20">
<br>
<label for="email">郵箱:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">提交</button>
</form>
<form id="myForm">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username">
<br>
<label for="email">郵箱:</label>
<input type="email" id="email" name="email">
<br>
<button type="submit">提交</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
var username = document.getElementById('username').value;
var email = document.getElementById('email').value;
if (username.length < 3 || username.length > 20) {
alert('用戶名長度必須在 3 到 20 個字符之間');
event.preventDefault();
} else if (!email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
alert('請輸入有效的郵箱地址');
event.preventDefault();
}
});
</script>
首先,需要在 HTML 文件中引入 jQuery 和 jQuery Validation 庫:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
然后,編寫表單和驗證規則:
<form id="myForm">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username">
<br>
<label for="email">郵箱:</label>
<input type="email" id="email" name="email">
<br>
<button type="submit">提交</button>
</form>
<script>
$(document).ready(function() {
$('#myForm').validate({
rules: {
username: {
required: true,
minlength: 3,
maxlength: 20
},
email: {
required: true,
email: true
}
},
messages: {
username: {
required: '請輸入用戶名',
minlength: '用戶名長度必須在 3 到 20 個字符之間',
maxlength: '用戶名長度不能超過 20 個字符'
},
email: {
required: '請輸入郵箱地址',
email: '請輸入有效的郵箱地址'
}
}
});
});
</script>
以上就是在 JavaScript 中進行表單驗證的幾種方法。