基于JQuery 1.4 开发.
luxury.validate = function(config){
var form = document.forms[config.form];
if (!form.vText)
form.vText = [];
if (!form.vRadio)
form.vRadio = [];
for (var k in config) {
if (k == 'form')
continue;
var c = config[k];
if (c.type == 'radio') {
form.vRadio[k] = c;
continue
};
var ele = form[k];
if (c.empty)
ele.value = c.empty;
if (!c.msgArea)
$(ele).after('<lable id="Msg_' + k + '" style="color:red;margin-left:20px;"></label>');
ele.config = c;
var check = function(){
var v = this.value.trim();
var c = this.config;
var msg = c.msgArea ? $('#' + c.msgArea) : $('#Msg_' + this.name);
if (c.blank && !v.length) {
this.validateChecked = false;
return msg.text(c.blank);
};
if (c.reg && !c.reg.test(v)) {
this.validateChecked = false;
return msg.text(c.regMsg)
};
if (c.min !== undefined && v < c.min) {
this.validateChecked = false;
return msg.text(c.minMsg)
};
if (c.max !== undefined && v > c.max) {
this.validateChecked = false;
return msg.text(c.maxMsg)
};
if (c.minLength !== undefined && v.length < c.minLength) {
this.validateChecked = false;
return msg.text(c.minLengthMsg)
};
if (c.maxLength !== undefined && v.length > c.maxLength) {
this.validateChecked = false;
return msg.text(c.maxLengthMsg)
};
if (c.validator) {
var r = c.validator(v);
if (r !== true) {
this.validateChecked = false;
return msg.text(r)
}
};
if (c.equal && v != $('#' + c.equal).val()) {
this.validateChecked = false;
return msg.text(c.equalMsg)
};
if (c.ajax) {
this.validateChecked = undefined;
var ele = this;
msg.text('检查中...');
$.getJSON(luxury.url(c.ajax.c, c.ajax.a, c.ajax.p), {
v: v
}, function(j){
if (j.status == 'success') {
ele.validateChecked = true;
msg.text(c.successMsg ? c.successMsg : '')
}
else {
ele.validateChecked = false;
msg.text(j.msg)
}
})
}
else {
this.validateChecked = true;
msg.text(c.successMsg ? c.successMsg : '')
}
};
if (c.type != 'radio') {
if (c.at && c.at == 'keyup') {
ele.validateCheckFunction = 'keyup';
$(ele).keyup(check)
}
else {
ele.validateCheckFunction = 'blur';
$(ele).blur(check)
}
};
form.vText.push(k)
};
$(form).unbind('submit');
$(form).submit(function(){
for (var k in this.vText) {
var ele = $('#' + this.vText[k]);
if (ele[0].validateChecked === undefined) {
ele.focus();
if (ele[0].validateCheckFunction === 'keyup')
ele.keyup();
else
ele.blur()
}
if (ele[0].validateChecked === true)
continue;
if (ele[0].validateChecked === false)
ele.focus();
return false
};
for (var k in this.vRadio) {
var c = this.vRadio[k];
if (c.blank)
if (!$(form).find(':radio[name=' + k + ']:checked').length) {
$('#' + c.msgArea).text(c.blank);
return false
}
else {
$('#' + c.msgArea).text(c.successMsg ? c.cussessMsg : '')
}
};
return true
})
};
其中注意:luxury.url是一个拼URL的方法,请自行实现.
用法
前端表单验证的用法
luxury.validate({
form:'<表单的Name>', //注意:不可以再有名字为Name的表单项了,
<表单项的Name>:{
//表单域的验证配置
},
…...
})
表单域参数
at
'<判断时机:keyup/blur>'
默认为blur
successMsg
'<验证成功后的提示>'
可选
msgArea
'<用于显示错误信息的块>'
可选,默认会在表单域后自动生成一个Label(红色)
type
'text/radio'
可选,默认是Text(这可以处理text及textarea)
blank
'<此文本域不允许为空的提示信息>'
可选
empty
'<此文本域的默认值>'
可选 (这东西其实是个default)
reg
<正则验证表达式>
可选
regMsg
'<不满足正则验证表达式时的提示信息>'
如reg则必须
min
<最小值>
可选
minMsg
'<小于最小值时的提示信息>'
如min则必须
max
<最大值>
可选
maxMsg
'<大于最大值时的提示信息>'
如max则必须
minLength
<最小长度>
可选
minLengthMsg
'<短于最小长度的提示信息>'
如minLength则必须
maxLength
<最大长度>
可选
maxLengthMsg
'<长于最大长度的提示信息>'
如maxLength则必须
validator
function(v){
//判断值是否有效的JS代码
//返回True表示有效
//返回字符串将作为提示出现
}
可选
equal
'<对比域的ID>'
可选
equalMsg
'<如果与对比域的值不同时的提示信息>'
如equal则必须
ajax
{
c:'<控制器名称>',
a:'<方法名称>',
p:<其它参数对象>
}
额外会以v参数传递表单域的值,使用ajaxOk/ajaxError返回判断结果
如果指定了type=='radio',则只能使用以下属性
blank
'<如果所有单选都未选择的提示信息>'
可选
msgArea
'<用于显示错误信息的块>'
必须
successMsg
'<验证成功后的提示>'
可选