Hwebui表单验证说明

Hwebui

2018-08-29

45

0

一、Hwebui表单验证说明

Hwebui表单验证组件是根据jquery validate组件开发而成,分为不同的验证方式:必输、email、url、日期、number、digits、creditcard(身份证)、equalTo字段校验。

二、界面图形

三、页面代码

3.1、引入头JS文件

<script type="text/javascript" src="${basePath}/js/system_ui/constants.js" ></script>
	<script type="text/javascript" src="${basePath}/js/jquery-3.1.0.min.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/jquery-ui.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/jquery.visible.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/jquery.validate.min.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/jquery.serializejson.min.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/messages_zh.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/jquery.dataTables.min.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/dataTables.fixedColumns.min.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/jquery.ztree.core.min.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/jquery.ztree.excheck.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/jquery.ztree.exhide.min.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/css_browser_selector.js" data="deafult"></script>

	<script type="text/javascript" src="${basePath}/js/templatePlugin/dist/template.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/templatePlugin/template.custom.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/templatePlugin/template.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.charts.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.gantt.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.maps.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.powercharts.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.ssgrid.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.treemap.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.widgets.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.zoomscatter.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/tagsinput.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/system_ui/poo.base.extends.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/system_ui/poo.extends.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/system_ui/poo.fn.extends.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/system_ui/poo.fn.funsioncharts.extends.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/system_ui/poo.main.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/select2.full.min.js" data="deafult"></script>
	<script type="text/javascript" language="javascript" src="${basePath}/js/My97DatePicker/WdatePicker.js" data="deafult"></script>

3.2、引入html代码

<@s.form action="" cssClass="form" >
		<table>
	   	  <tr>
	   	  	<td>必须验证:</td>
	   	  	<td><@s.textfield name="entity1" maxlength="36" cssClass="required" /></td>
	   	  	<td>email验证:</td>
	   	  	<td><@s.textfield name="entity2" maxlength="36" cssClass="required email" /></td>
	   	  </tr>
	   	  <tr>
	   	  	<td>url验证:</td>
	   	  	<td><@s.textfield name="entity3" maxlength="36" cssClass="required url" /></td>
			<td>date验证:</td>
	   	  	<td><@s.textfield name="entity4" maxlength="36" cssClass="required date Wdate" onfocus="WdatePicker({position:{left:0,top:0}})"/></td>
	   	  </tr>
	   	  <tr>
	   	  	<td>number验证:</td>
	   	  	<td><@s.textfield name="entity5" maxlength="36" cssClass="required number" /></td>
			<td>digits验证:</td>
	   	  	<td><@s.textfield name="entity6" maxlength="36" cssClass="required digits" /></td>
	   	  </tr>
	   	   <tr>
	   	  	<td>creditcard验证:</td>
	   	  	<td><@s.textfield name="entity7" maxlength="36" cssClass="required creditcard" /></td>
			<td>equalTo验证:</td>
	   	  	<td><@s.textfield name="entity8" maxlength="36" cssClass="required equalTo:'#entity7'" /></td>
	   	  </tr>
	   	  <tr>
	   	  	<td>是否默认:</td>
	   	  	<td><@s.select 
      			 name="entity.isDeafult"
      			 list=r"#{'1':'是','0':'否'}"
      			 value="entity.isDeafult"
       			 required="true" cssClass="required" id="seachSelect" datatype="search" 
				/></td>
			<td></td>
	   	  	<td></td>
	   	  </tr>
	   	  <tr>
	   	  	<td>提交:</td>
	   	  	<td><input class="submit" type="submit" value="Submit">
	   	  </tr>
	   	  
	   </table>
   </@s.form>

代码说明:

需要在input组件引入相应的css类,就可以完成对表单单验证。 

下载web项目地址:

链接:https://pan.baidu.com/s/1rZu6tLALMfyBJ8MhD-lepw 密码:w1o1

发表评论

全部评论:0条

鸿福951

努力打造一个好用的webui

热评文章

推荐文章