文档章节

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

abcijkxyz
 abcijkxyz
发布于 2016/08/06 11:52
字数 626
阅读 23
收藏 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

abcijkxyz
粉丝 64
博文 6421
码字总数 1876
作品 0
深圳
项目经理
私信 提问

暂无文章

Activity启动模式二

上篇文章Activity启动模式一主要介绍了Activity的四种启动模式,这些启动模式都是在AndroidManifest中进行配置的。除此之外,Android系统还通过Intent类提供了一些标志位,同样可以指定Activ...

ltlovezh
37分钟前
6
0
三原色还原

1、Color Filter Array — CFA 随着数码相机、手机的普及,CCD/CMOS 图像传感器近年来得到广泛的关注和应用。 图像传感器一般都采用一定的模式来采集图像数据,常用的有 BGR 模式和 CFA 模式...

天王盖地虎626
48分钟前
5
0
kubernetes pod exec接口调用

正文 一般生产环境上由于网络安全策略,大多数端口是不能为集群外部访问的。多个集群之间一般都是通过k8s的ApiServer组件提供的接口通信,如https://192.168.1.101:6443。所以在做云平台时,...

码农实战
今天
8
0
3_数组

3_数组

行者终成事
今天
8
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部