一、JQuery 表单验证插件——Validation
Validation是历史悠久的JQuery插件之一,经过多年的项目验证,得到了开发者的一致好评。
1、特点:
1)内置验证规则:拥有必填、数字、Email、URL和信用卡号码等19类内置验证规则
2)自定义验证规则:可以很方便自定义验证规则
3)简单强大的验证信息提示:默认了验证信息提示,并支持自定义提示信息覆盖默认提示
4)实时验证:可以通过keyup(每次按键时)或blur(当控件失去焦点时)事件触发验证,而不仅仅是在表单提交的时候验证
2、使用步骤
(1)引入JQUery库和Validation插件
(2)设定验证规则(项目实例)
$('#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,...}(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 这三项除了text input之外还可以用于checkbox,select这两种控件
(11) email:true 电子邮件
(12) equalTo: "#field" 与#field值相同
(13) dateISO:true 日期型,格式为1998/01/22 1999-12-125.messages ,自定义错误信息,格式与rules类似,需要注意的是如果使用此项,那么所有的校验项都必需自定义出错信息,如果只想定义其中的某一些,那么就把其它的出错信息定义为空(即""),系统即会使用默认值。
扩展:
(一)自定义校验规则
可以通过自定义检验函数的方式新增加校验规则,步骤如下:
1. 在定义校验规则之前定义一个新的方法
2. 在rules中指定这个某个域使用此校验规则
3. 在messages中指定这个域使用此校验规则没有通过的提示信息
将校验规则写到控件中将校验规则写到控件中//这里定义了一个名为equal的规则
//value是指当前校验域的值
//element是指当前检验的域
//param是指在rules中设定的参数
//这三个参数会在进行校验时由系统自动带入
$.validator.methods.equal = function(value, element, param){
//在这里使用上面的三个参数进行校验
if(value == param) return true;
//如果当前域的值等于指定的参数就通过校验
};
$('#form1').validate({
rules:{
field1:{equal:20 }//在这里指定field1的检验规则是equal,并且参数是20
},
messages:{
field1:{equal:'您的计算有误!'}//在这里定义field1的equal规则校验出错后的提示信息
}
});
(二)将校验规则写到控件中
有时候我们的控件是动态生成的,这个时候就不可能提前先写好校验规则,需要在生成控件的同时写校验规则.
这样写校验规则有两种写法,一是将规则写到class属性中,二是将规则写到单独的validate属性中,其中:
写到class属性的写法如下,例子中在规则前添加了名为some, other, styles 的三个class:
另外一种写法如下,使用自定义的validata属性,但必需加载jquery.metadata.js 这个文件
二、ligerUI自动创建表单var data = [
{ id: '0', text: '在线浏览' },
{ id: '1', text: '实体借阅' }
];var mainform = $("#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
});相关参数说明:ligerUI API:http://api.ligerui.com/三、判断验证是否通过并提交方法一:submit 按钮通不过submit按钮方法,会调用jquery的验证,如果验证不成功就不可以提交。
方法二:
通过JS方法,通过jquery的valid()方法判断表单是否通过验证,如果验证通过则提交表单数据。
function checkvalidate(){
if($("#form1").valid()){
$("#form1").submit();
}方法三:综合方案(项目中使用)$("#save").bind('click', function () {
if ($("#form").valid()) { //判断验证是否通过
var form = liger.get("form");
var data = form.getData(); //提取form中的数据
data = liger.toJSON(data);$.ajax({
load: "正在加载.....",
type: "post",
url: "../handler/AddApplication.ashx",
data: { "item": data },
success: function (appid) {
if (appid) {
var datas = grid.getSelecteds(); //获取Grid表格选中的行数据集合,同getSelectedRows
for (var index in datas) {
var Appid = appid;
var Id = datas[index]["ID"];
var Description = datas[index]["Description"];
var FileType = datas[index]["FileType"];
var Unit = 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代码: