JQuery表单验证+ligerUI自动表单

一、JQuery表单验证插件——Validation

Validation是历史悠久的JQuery插件之一，经过多年的项目验证，得到了开发者的一致好评。

1、特点：

1）内置验证规则：拥有必填、数字、Email、URL和信用卡号码等19类内置验证规则

2）自定义验证规则：可以很方便自定义验证规则

3）简单强大的验证信息提示：默认了验证信息提示，并支持自定义提示信息覆盖默认提示

4）实时验证：可以通过keyup（每次按键时）或blur（当控件失去焦点时）事件触发验证，而不仅仅是在表单提交的时候验证

2、使用步骤

（1）引入JQUery库和Validation插件

<scriptsrc="../lib/jquery/jquery.js"type="text/javascript"></script>
<scriptsrc="../lib/jquery-validation/jquery.validate.min.js"type="text/javascript"></script>
<scriptsrc="../lib/jquery-validation/jquery.metadata.js"type="text/javascript"></script>
<scriptsrc="../lib/jquery-validation/messages_cn.js"type="text/javascript"></script>

（2）设定验证规则(项目实例)

[code]$('#form').validate({
event:"keyup",
rules:{
ApplTimelength:{required:true,digits:true,maxlength:4},
LeaderSelect:{required:true},
Reason:{required:true,maxlength:100},
Type:{required:true}
},
messages:{
ApplTimelength:{
required:"请输入借阅天数",
digits:"时间必须为整数",
maxLength:"时间不能长于4位"
},
LeaderSelect:{
required:"请选择审批领导"
},
Reason:{
required:"请输入借阅理由",
maxLength:"字数不能超过100"
},
Type:{
required:"请选择借阅类型"
}
},
errorPlacement:function(lable,element){
element.ligerTip({content:lable.html(),appendIdTo:lable});
},
success:function(lable){
lable.ligerHideTip();
}
});

代码说明：

1.event是触发校验的方式，可选值有keyup(每次按键时)，blur(当控件失去焦点时)，不使用这个参数时就只在按提交按钮时触发
2.如果在提交前还需要进行一些自定义处理使用submitHandler参数，其它的都比较简单，详细信息可在API中查阅.
3.debug如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便.
4.rules所有的检验规则都写在这个参数里面.
校验规则参数格式为：

ID:{rule1,rule2,...}

[code](1)required:true必输
(2)number:true只能输入数字(包括小数)
(3)digits:true只能输入整数
(4)minValue:3不能小于3
(5)maxValue:100最大不超过100
(6)rangeValue:[50,100]值范围为50-100
(7)minLength:5最小长度(汉字算一个字符)
(8)maxLength:10最大长度(汉字算一个字符)
(9)rangeLength:[5,10]长度范围为5至10位(汉字算一个字符)
(10)上面的minLength,maxLength,rangeLength这三项除了textinput之外还可以用于checkbox,select这两种控件
(11)email:true电子邮件
(12)equalTo:"#field"与#field值相同
(13)dateISO:true日期型，格式为1998/01/221999-12-12

5.messages，自定义错误信息，格式与rules类似，需要注意的是如果使用此项，那么所有的校验项都必需自定义出错信息，如果只想定义其中的某一些，那么就把其它的出错信息定义为空（即""），系统即会使用默认值。

[/code]
扩展：

（一）自定义校验规则

可以通过自定义检验函数的方式新增加校验规则，步骤如下：
1.在定义校验规则之前定义一个新的方法
2.在rules中指定这个某个域使用此校验规则
3.在messages中指定这个域使用此校验规则没有通过的提示信息

将校验规则写到控件中将校验规则写到控件中//这里定义了一个名为equal的规则
//value是指当前校验域的值
//element是指当前检验的域
//param是指在rules中设定的参数
//这三个参数会在进行校验时由系统自动带入
$.validator.methods.equal=function(value,element,param){
//在这里使用上面的三个参数进行校验
if(value==param)returntrue;
//如果当前域的值等于指定的参数就通过校验
};
$('#form1').validate({
rules:{
field1:{equal:20}//在这里指定field1的检验规则是equal，并且参数是20
},
messages:{
field1:{equal:'您的计算有误！'}//在这里定义field1的equal规则校验出错后的提示信息
}
});

（二）将校验规则写到控件中

有时候我们的控件是动态生成的，这个时候就不可能提前先写好校验规则，需要在生成控件的同时写校验规则.
这样写校验规则有两种写法，一是将规则写到class属性中，二是将规则写到单独的validate属性中，其中：
写到class属性的写法如下，例子中在规则前添加了名为some,other,styles的三个class：

[code]
<scriptsrc="../js/jquery.js"type="text/javascript"/>
<scriptsrc="../js/jquery.validate.js"type="text/javascript"/>
<inputid="cname"name="name"class="someotherstyles{required:true,minLength:2}"/>
<textareaid="ccomment"name="comment"class="{required:true}"</textarea>

[code]

另外一种写法如下，使用自定义的validata属性，但必需加载jquery.metadata.js这个文件

[code]<scriptsrc="../js/jquery.js"type="text/javascript"/>
<scriptsrc="../js/jquery.metadata.js"type="text/javascript"/>
<scriptsrc="../js/jquery.validate.js"type="text/javascript"/>
<inputtype="checkbox"id="spam_email"value="email"name="spam"validate="required:true,minLength:2"/>

二、ligerUI自动创建表单

[code]vardata=[
{id:'0',text:'在线浏览'},
{id:'1',text:'实体借阅'}
];
varmainform=$("#form");
mainform.ligerForm({
inputWidth:280,
validate:true,
fields:[
{display:"借阅类型",name:"Type",newline:true,labelWidth:100,width:120,space:30,type:"select",comboboxName:"Type",
	options:{data:data}//获取自定义数据
	},
{display:"借阅时长(天数)",name:"ApplTimelength",newline:true,labelWidth:140,width:80,space:30,type:"text",options:{type:"int",isNegative:false}},
{display:"借阅理由",name:"Reason",newline:true,labelWidth:100,width:320,space:30,type:"textarea"},
{display:"选择审批人",name:"LeaderSelect",newline:true,labelWidth:140,space:30,type:"select",comboboxName:"LeaderSelect",
	options:{	//后台获取数据
url:"../handler/LeaderSelect.ashx?deptid="+deptID,
valueField:'ID',
textField:'Name'
}
}
],
toJSON:JSON2.stringify
});

相关参数说明：

ligerUIAPI：http://api.ligerui.com/

三、判断验证是否通过并提交

方法一：

submit按钮

通不过submit按钮方法，会调用jquery的验证，如果验证不成功就不可以提交。

方法二：
通过JS方法，通过jquery的valid()方法判断表单是否通过验证，如果验证通过则提交表单数据。functioncheckvalidate(){
if($("#form1").valid()){
$("#form1").submit();
}

方法三：综合方案（项目中使用）

[code]$("#save").bind('click',function(){
if($("#form").valid()){	//判断验证是否通过
varform=liger.get("form");
vardata=form.getData();	//提取form中的数据
data=liger.toJSON(data);
$.ajax({
load:"正在加载.....",
type:"post",
url:"../handler/AddApplication.ashx",
data:{"item":data},
success:function(appid){
if(appid){
vardatas=grid.getSelecteds();//获取Grid表格选中的行数据集合,同getSelectedRows
for(varindexindatas){
varAppid=appid;
varId=datas[index]["ID"];
varDescription=datas[index]["Description"];
varFileType=datas[index]["FileType"];
varUnit=datas[index]["Unit"];
$.ajax({
load:"正在加载.....",
type:"post",
datatype:"json",
url:"../handler/InsertApplication.ashx",
data:{"id":Id,"appid":Appid,"description":Description,"filetype":FileType,"unit":Unit},
success:function(resualt){
if(resualt){
}
},
error:function(message){
alert(message);
}
})
}
$.ajax({
url:"../handler/ClearSession.ashx",
data:{"SessionName":"cart"},
success:function(resualt){
alert("添加成功");
window.location.href="../ArchiveBorrow/Applicant.aspx";	//跳转页面
},
error:function(message){
alert(message);
}
})
}
},
error:function(message){
alert(message);
}
})
}
});//按钮

此项目中的方案是，首先判断表单验证是否通过，如果通过就分别获取此页面的表单form数据和表格grid数据，然后提交给后台进行相应处理。其中嵌套了三个ajax方法，设计非常严密，值得我们学习！

html代码：

<body>
<div>
<formid="form"method="post"action="">
</form>
<divclass="right">
<inputtype="button"id="save"value="提交申请"/>
</div>
<br/>
<divid="grid"></div>
</div>
</body>

[/code]