<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">本文采用:</span>
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">jquery.validationEngine.js 、jquery-1.10.2.js</span>
基于jquery的表单验证的插件,只是IE6以及以上版本。
实例:
<pre name="code" class="html"><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <script type="text/javascript" src="jquery-1.10.2.js" ></script> <script type="text/javascript" src="jquery-1.10.2.min.js" ></script> <script type="text/javascript" src="js/jquery.validationEngine.js"></script> <script type="text/javascript" src="js/jquery.validationEngine.min.js"></script> <script type="text/javascript" src="js/jquery.validationEngine-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="css/validationEngine.jquery.css"></link>
<div> <h1>表单验证</h1> </div> <div> <form id="form_id"> <fieldset style="margin-bottom: 15px;padding: 15px;border: 1px solid #B5B8C8;border-radius: 3px;"> <legend>开始测试</legend> <label style="margin-bottom: 4px;display:block">用户名:</label> <input type="text" id="username" style="margin-bottom:10px;width:300px;padding:4px;border:1px solid #B5B8C8;border-radius:3px;background:#FFF;color:#555;font-size:14px;" name="username" class="validate[required] text-input" data-errormessage="* 请填写用户名"/><br/> <label style="margin-bottom: 4px;display:block">密码:</label> <input type="password" id="password" style="margin-bottom:10px;width:300px;padding:4px;border:1px solid #B5B8C8;border-radius:3px;background:#FFF;color:#555;font-size:14px;" name="password" class="validate[required] text-input" /><br/> <input type="submit" id="buttonTest" name="buttonTest" value="注册" /> </fieldset> </div>其中
data-errormessage支持自定义验证提示
直接调用:
$funciton(){
$('#form_id').validationEngine(); // 自定义参数调用 $('#form_id').validationEngine('attach', { promptPosition: 'topRight', //定义提示位置 scroll: false });
};
效果图: