文档章节

jQuery 表单验证插件 jQuery Validation Engine 使用

雷霄骅
 雷霄骅
发布于 2014/08/16 13:40
字数 626
阅读 381
收藏 0

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格式


下载地址:http://download.csdn.net/detail/leixiaohua1020/6376529

本文转载自:http://blog.csdn.net/leixiaohua1020/article/details/12581131

雷霄骅

雷霄骅

粉丝 213
博文 419
码字总数 2129
作品 4
朝阳
程序员
私信 提问
加载中

评论(0)

自定义jQuery插件Step by Step

自定义jQuery插件Step by Step 1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是R...

wolf_su
2013/07/04
247
0
表单验证:nice Validator 与 jQuery Validation 对比

提要 最近,有人提到jQuery Validation Plugin,甚至有人怀疑 nice Validator 和 这个插件系同一个作者。我好想说,你太有想象力了-。-!jQuery Validation全程的鹰文,nice Validator 全程的...

JonyZhang
2013/08/02
4.2K
7
使用jQuery插件开发一个完整验证功能的超酷动态留言版系统

在线演示 本地下载 今 天是情人节,这里我们将创建一个超酷的动态留言板来帮助大家度过这个情人节,可能大家使用过很多的评论或者留言系统,基本都是静态输入的形式,今天我们创 建的这个留言...

gbin1
2012/02/15
866
2
12 个 jQuery 的表单验证教程和插件

jQuery Form Validation 使用jQuery进行快速简单的表单验证教程 Advanced jQuery form validation jQuery plugin: Validation A jQuery inline form validation Adding Form Validation to ......

红薯
2011/11/21
4K
3
10 款高质量的 jQuery 表单验证插件

本文整理了几款高质量的jQuery表单验证插件,可以节约web开发者的时间。希望对你有帮助! 列表如下: 1) A Jquery Inline Form Validation 2) Form Validation Using Jquery 3) Using Jquery...

小卒过河
2011/06/28
11W
18

没有更多内容

加载失败,请刷新页面

加载更多

微信-公众号自定义微信菜单二次开发

1.开发 <基本配置< 服务器配置 服务器地址(URL) :接收回调事件本系统接口(微信业务回调入口(用户关注,取消关注、发消息等) 令牌(Token) :wx.callback.token,本系统定义的,开发时会用到...

Shingfi
6分钟前
22
0
「网易官方」极客战记(codecombat)攻略-地牢-严酷考验 B

简介: 这一关在while-true循环内只需要4条命令。 默认代码 # 使用你刚学到的技能击败那些食人魔。 # 记住:打败食人魔矮人需要两次攻击。 概览 有了循环和变量这些利器,解决所有这些食人魔...

极客战记
6分钟前
45
0
本地DOCKER删除镜像时报错解决办法

1.报错: C:\Users\hongcq>docker rmi 6bef6f0a19bcError response from daemon: conflict: unable to delete 6bef6f0a19bc (must be forced) - image is being used by stopped container......

楚番
18分钟前
23
0
分享Linux系统快速入门法

相信看到这篇文章的你一定是想要学习Linux,或者已经在学习Linux的人了,那我们就可以一起探讨一下,学习Linux如何快速入门呢? 首先,希望大家弄清楚自己为什么要学习Linux,有的人是因为兴...

linuxprobe2020
24分钟前
35
0
压测中测量异步写入接口的延迟

在服务端性能优化的时候,有一种方案叫 “异步写入”。就是把本来要写入数据库的功能放到异步来做,跟异步查询转同步的区别在于,异步查询是要等结果的,而异步写入则可以不等返回结果,甚至...

八音弦
29分钟前
54
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部