jQuery 表单验证插件 jQuery Validation Engine 使用方式如下:
1.引入头文件(注意一定要把jQuery放在前面),指定使用jQuery Validation Engine的<form>的ID:
<script src="lib/jquery-1.8.3.min.js"></script> <!-- validationEngine --> <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/> <script src="lib/jquery.validationEngine-zh_CN.js" type="text/javascript" charset="utf-8"> </script> <script src="lib/jquery.validationEngine.js" type="text/javascript" charset="utf-8"> </script> <script> $(document).ready(function(){ // binds form submission and fields to the validation engine $("#formular").validationEngine('attach'); }); </script>
2.在需要使用jQuery Validation Engine的<form>代码如下所示:
<form action="UserAdd.action" method="post" id="formular"> <table class="tablesorter"> <tbody> <tr><td><s:property value="%{getText('user.name')}"/>:</td><td><input value="" name="name" type="text" /></td></tr> <tr><td><s:property value="%{getText('user.loginname')}"/>:</td><td><input value="" class="validate[required,minSize[4]] text-input validate[optional,maxSize[20]] text-input" name="loginname" type="text" /></td></tr> <tr><td><s:property value="%{getText('user.password')}"/>:</td><td><input value="" class="validate[required] text-input" name="password" type="password" id="password"/></td></tr> <tr><td><s:property value="%{getText('user.repassword')}"/>:</td><td><input value="" class="validate[required,equals[password]] text-input" name="repassword" type="password" /></td></tr> <tr><td><s:property value="%{getText('user.email')}"/>:</td><td><input class="validate[required,custom[email]] text-input" value="" name="email" type="text" /></td></tr> <tr><td><s:property value="%{getText('user.sex')}"/>:</td><td><input id="sex_man" type="radio" name="sex" value="1" /><s:property value="%{getText('user.sex.man')}"/> <input id="sex_woman" type="radio" name="sex" value="0"/><s:property value="%{getText('user.sex.woman')}"/></td></tr> <tr><td><s:property value="%{getText('user.birthday')}"/>:</td><td><input class="validate[required,custom[date]] text-input" value="" name="birthday" id="birthday" type="text" /></td></tr> <tr><td><s:property value="%{getText('user.telephone')}"/>:</td><td><input class="validate[custom[phone]] text-input" value="" name="telephone" type="text" /></td></tr> <tr><td><s:property value="%{getText('user.userrolename')}"/>:</td><td><select name="userroleid" id="userroleid" class="input_select2"> <c:forEach items="${alluserrole}" var="userrole"> <option value="${userrole.id}"}>${userrole.name}</option> </c:forEach> </select></td></tr> </tbody> </table> <div><s:property value="%{getText('global.remark')}"/>:<br/> <textarea class="text_area2" cols="32" rows="3" name="remark"><s:property value="%{getText('user.value')}"/><s:property value="%{getText('global.remark')}"/></textarea></div><div style="height:10px"></div> <div> <input class="submit2" name="Submit" type="submit" value="提交" /> <input class="submit2" name="Submit2" type="reset" value="重置" /> </div> </form>
代码有些乱,是直接从项目工程中粘贴出来的,用到了Struts2标签,JSTL,以及EL等。但是决定表单如何验证的关键在于每个输入框的“class”属性。
例如name为loginname的<input>的class属性如下:
class="validate[required,minSize[4]] text-input validate[optional,maxSize[20]] text-input"
就规定了输入内容长度为4-20字符,如果为空,效果如下:
再比如name为repassword的<input>的class属性如下:
class="validate[required,equals[password]] text-input"
则会比较id为password的<input>的内容与本<input>是否相同,即确认密码与密码是否相同。
再比如name为email的<input>的class属性如下:
class="validate[required,custom[email]] text-input"
则验证本<input>的内容是否符合Email格式
相关推荐
Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合。
NULL 博文链接:https://xiaofeng.iteye.com/blog/642233
jQuery-Validation-Engine-master 表单验证插件 简单好用,已经包含汉化
jQuery.validationEngine 中文验证
一个很不错的验证框架,支持表单验证,单个字段验证,函数验证,样式很不错!
jQuery-Validation-Engine-master
jQuery.validationEngine v3.1.0 寻找官方贡献者 这个项目已经进行了7年多了,现在我仅通过请求请求的贡献来维护该项目。 但是,我很乐意帮助提高代码质量并保持可接受的未解决问题。 概括 jQuery验证引擎是一个...
jQuery-Validation-Engine-master非常好的jquery验证表单控件
主要介绍了JQuery.validationEngine表单验证插件(推荐)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
按部门老大要求改了下validationEngine验证组件的样式,1资源分,谢谢下载
前端项目-jQuery-Validation-Engine,jquery验证引擎是一个javascript插件,旨在验证浏览器中的表单字段(即6-8、Chrome、Firefox、Safari、Opera 10)。这个插件提供了视觉上吸引用户注意的提示。
其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 ...link rel=”stylesheet” href=”validationEngine.jquery.css
(五)struts2- 2.3.15.3 spring3.2.4 mybatis-3.2.3 jquery.validationEngine表单验证
本文通过实例代码给大家介绍了jquery validationEngine 表单验证插件效果,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
jquery/validation_engine表单提交验证,简单实用。将css和js引用,并在需要验证的元素class中填写相应参数,以及表单提交的方法中进行验证 $("#userForm").validateEngine("validate")。在项目中已经实用,很方便。
NULL 博文链接:https://wanglu271991027.iteye.com/blog/1589737
jquery 表单验证 validationEngine.zip 现在用的最多的表单验证ui
jQuery Validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
Validation-Engine是一个简单好用的前端表单验证插件,这里提供2.6.4版本给大家,里面的验证规则根据自己使用情况扩展了一些。
jQuery Validation Engine v2.6.2的Ciaoca中文增强版,更多介绍见:http://code.ciaoca.com/jquery/validation-engine/