先給大家展示下效果圖，如果大家感覺不錯，請參考實現代碼：
廢話少說，直接上代碼，可拷貝直接運行：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>validationEngine 插件</title>
<!--<link rel="stylesheet" type="text/css" href="css/validationEngine.jquery.css" rel="external nofollow" />-->
<link href="https://cdn.bootcss.com/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.css" rel="external nofollow" rel="stylesheet">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#form{
padding-left: 20px;
}
#form .line{
padding: 10px 0;
margin: 10px 0;
border-top: 1px dashed #0044CC;
}
</style>
</head>
<body>
<form action="" method="post" id="form">
<div class='line'>
必填項--輸入框
</div>
<input value="" class="validate[required]" type="text" name="req">
<div class='line'>
必填項--復選框
</div>
<input class="validate[required]" type="checkbox" name="agree">我同意服務協議
<div class='line'>
url驗證
</div>
<input value="http://" class="validate[required,custom[url]]" type="text" name="url">
<div class='line'>
email驗證
</div>
<input value="forced_error" class="validate[required,custom[email]]" type="text" name="email">
<div class='line'>
IP 地址（v4）
</div>
<input value="192.168.3." class="validate[required,custom[ipv4]]" type="text" name="ip">
<div class='line'>
數值
</div>
<input value="-33.87a" class="validate[required,custom[number]]" type="text" name="number">
<div class='line'>
整數
</div>
<input value="10.1" class="validate[required,custom[integer]]" type="text" name="integer">
<div class='line'>
相等運算
</div>
<input value="karnius" class="validate[required]" type="password" name="password" id="password">
<input value="kaniusBAD" class="validate[required,equals[password]]" type="password" name="password2" id="password2">
<div class='line'>
限制最小字符數
</div>
<input value="" class="validate[required,minSize[6]]" type="text" name="minsize">
<div class='line'>
限制最大字符數
</div>
<input value="0123456789" class="validate[optional,maxSize[6]]" type="text" name="maxsize">
<div class='line'>
輸入整數（必須大于或等于 -5）
</div>
<input value="-7" class="validate[required,custom[integer],min[-5]]" type="text" name="min">
<div class='line'>
輸入整數（必須小于或等于 50）：
</div>
<input value="55" class="validate[required,custom[integer],max[50]]" type="text" name="max">
</form>
<!--<script src="../jquery/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!--<script src="js/jquery.validationEngine.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="https://cdn.bootcss.com/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<!--<script src="js/jquery.validationEngine-zh_CN.min.js" type="text/javascript" charset="utf-8"></script>-->
<script src="https://cdn.bootcss.com/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-zh_CN.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#form').validationEngine({
scroll: false,
promptPosition: 'centerRight',
maxErrorsPerField: 1,
showOneMessage: true,
addPromptClass: 'formError-noArrow formError-text'
});
});
</script>
</body>
</html>
以上所述是小編給大家介紹的validationEngine 表單驗證插件使用實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
