現在的網頁開發中，表單驗證非常重要。在這里，我們將會介紹如何使用jQuery表單驗證插件完成一個簡單的示例。
<!DOCTYPE html>
<html>
<head>
<title>jQuery表單驗證示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
</head>
<body>
<form id="myForm">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="提交">
</form>
<script>
$(function() {
$("#myForm").validate({
rules: {
username: {
required: true,
minlength: 6
},
password: {
required: true,
minlength: 6
}
},
messages: {
username: {
required: "用戶名不能為空",
minlength: "用戶名長度不能少于6位"
},
password: {
required: "密碼不能為空",
minlength: "密碼長度不能少于6位"
}
}
});
});
</script>
</body>
</html>在上面的代碼中，我們通過引入jQuery和jQuery Validation插件，實現了一個簡單的表單驗證。具體來說，我們使用了validate()方法，它接受一個對象作為參數，其中rules字段定義了驗證規則，以key/value形式表示。例如，username字段必須是必填字段(required: true)，并且長度不能少于6(minlength: 6)。messages字段則用于自定義錯誤提示信息。
最后，值得注意的是，我們在代碼塊中使用了$(function(){...})語句，這是jQuery中的“DOM就緒”事件，確保我們的代碼在文檔加載完成后再執行。
上一篇div li字體