网页布局之一

    昨天一直在做jsp页面的布局，在真正接触了java的网页编写，我才知道原来jsp也有许多的与Asp.net一样的控件可以使用，而且似乎jsp的程序员的自由度更高，他允许前台和逻辑控制的完全分离。

    但是，我现在只是在做前台页面的工作，所以我就总结制作页面的一些心得。

    一、在做页面的行列布局时，html的<div>和<span>标签完全可以代替<table>的<tr>,<td>标签。虽说可以替换，但是在做单一页面样式时，还是没有<table>简单实用。

    二、在标签中一切的标签样式都可以使用标签的style属性来解决，例如<div style="width:1024px;border:2;height:auto;"等等。

    三、在做网页文本输入框的验证时，我们使用的是jquery的easyui。既然是使用jquery，那最好是写一个jquery的脚本文件。在写文件之前，一定要把jquery-easyui的库文件导入到项目中。

    四、在js中编写easyui的validatebox的扩展方法，源代码如下：

//function validate(){
$.extend($.fn.validatebox.defaults.rules,{
		user:{//验证用户名
			validator:function(value){
				return /^[a-zA-Z][a-zA-Z0-9]{5,15}$/i.test(value);
			},
			message:'用户名不合法,字母开头，允许6-16字节'
		},
		
		name:{//验证真实姓名，可以是中英文
			validator:function(value){
				return /^[\u4e00-\u9fa5]{2,6}$/i.test(value)|/^[a-zA-Z]{6,16}$/i.test(value);
			},
			message:'请输入真实姓名,可以是中英文,中文2-6个字符，英文6-16个字节'
		},
		
		password:{
			validator:function(value){
				return /^[a-zA-Z0-9]{6,32}$/i.test(value);
			},
			message:'请输入密码，6-32位'
		},
		
		repassword:{
			validator:function(value,param){
				
					return $(param[0]).val() == value;
				
			},
			message:'两次密码不一致'
		},
		//////////////////////////////////////////////////////////////////////
		phone:{
			validator:function(value){
				var len=$.trim(value).length;
				if(len>=10){
					return /^(13|15|18|14)\d{9}$/i.test(value);					
				}else{
					return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
					
				}
			},
			message:'格式不正确,请使用下面格式:020-88888888或手机12345678900'
		},
		/////////////////////////////////////////////////////////////////////////////
		email:{
			validator:function(value){
				return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);
			},
			message:'请输入有效的e-mail账号（例如：abc@163.com）'
		},
		
		address:{
			validator:function(value){
				return /^(?=.*?[\u4E00-\u9FA5])[\d\u4E00-\u9FA5]+$/i.test(value);
			},
			message:'住址只能有汉字和数字（不能全为数字）'
		},
		
		
		idNO:{
			validator:function(value){
				return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value); 
			},
			message:'身份证号格式不对'
		}
		
		

		
	}
	
);

function submitReg(){
	
	var flag=$("#regform").form('validate');
     //alert(flag);
	if(flag==true){
		return alert("注册成功！");
	}else{
		return alert("输入信息有误，注册失败！");
	}
}


五、在jsp页面中引用js文件：<script type="text/javascript" src="../../js/validate.js"></script></p><p>
  
        引入脚本文件后，在input标签中的使用方法是class，data-options和validType属性，例如：
      <span class="FontRed">*</span><span><font color="black">用户名:</font>   
      <input class="easyui-validatebox" type="text" name="user" validType="user" id="user" data-options="required:true" missingMessage="不能为空"/>
      </span><!-- <span>请填入信息！</span><br> -->


      最后是两个button功能的编写：
        <input type="button" name="submit" id="submit" value="完成" onclick="submitReg()">  
        <input type="reset" name="reset" id="reset" value="重置">  
    </span> 

    初出茅庐，望不吝赐教。