要使用jQuery的validationEngine插件來實現表單驗證,首先需要引入相關的CSS和JavaScript文件。可以從插件的官方網站下載最新版本的文件。
<link rel="stylesheet" href="validationEngine/css/validationEngine.jquery.css" type="text/css" media="screen" />
<script src="jquery.js"></script>
<script src="validationEngine/js/jquery.validationEngine.js"></script>
<script src="validationEngine/js/jquery.validationEngine-zh_CN.js"></script>
<form id="myForm">
<div>
<label for="name">姓名:</label>
<input type="text" id="name" class="validate[required]" />
</div>
<div>
<label for="email">郵箱:</label>
<input type="text" id="email" class="validate[required,custom[email]]" />
</div>
<div>
<label for="phone">電話:</label>
<input type="text" id="phone" class="validate[required,custom[phone]]" />
</div>
<input type="submit" value="提交" />
</form>
$(document).ready(function() {
$("#myForm").validationEngine();
});
現在,當用戶提交表單時,validationEngine將自動驗證表單輸入是否符合規則。如果有任何驗證錯誤,將顯示相應的錯誤消息。