您的位置：首页 > Web前端 > JQuery

jquery表单验证插件与使用方法

2013-09-05 20:23 751 查看

这是一款从国外网站抄来的jquery表单验证插件与使用方法，方法很简单如果要验证那个表单input就定义他validation="required"，如果要为数字就validation="required|isInt"好用吧。这是一款从国外网站抄来的jquery表单验证插件与使用方法，方法很简单如果要验证那个表单input就定义他validation="required"，如果要为数字就validation="required|isint"好用吧。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.php100.com/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>jquery表单验证插件与使用方法</title>
<script language="网页特效">
(function($) {
/*
validation singleton
*/
var validation = function() {

var rules = {

email : {
check: function(value) {

if(value)
return testpattern(value,"[w-]+(.[w-]+)*@([w-]+.)+[a-za-z]+");
return true;
},
msg : "enter a valid e-mail address."
},
url : {
check : function(value) {
if(value)
return testpattern(value,"https教程?://(.+.)+.{2,4}(/.*)?");
return true;
},
msg : "enter a valid url."
},
required : {

check: function(value) {
if(value)
return true;
else
return false;
},
msg : "this field is required."
}
}
var testpattern = function(value, pattern) {
var regexp = new regexp("^"+pattern+"$","");
return regexp.test(value);
}
return {

addrule : function(name, rule) {
rules[name] = rule;
},
getrule : function(name) {
return rules[name];
}
}
}

/*
form factory
*/
var form = function(form) {

var fields = [];

form.find("[validation]").each(function() {
var field = $(this);
if(field.attr('validation') !== undefined) {
fields.push(new field(field));
}
});
this.fields = fields;
}
form.prototype = {
validate : function() {
for(field in this.fields) {

this.fields[field].validate();
}
},
isvalid : function() {

for(field in this.fields) {

if(!this.fields[field].valid) {

this.fields[field].field.focus();
return false;
}
}
return true;
}
}

/*
field factory
*/
var field = function(field) {
this.field = field;
this.valid = false;
this.attach("change");
}
field.prototype = {

attach : function(event) {

var obj = this;
if(event == "change") {
obj.field.bind("change",function() {
return obj.validate();
});
}
if(event == "keyup") {
obj.field.bind("keyup",function(e) {
return obj.validate();
});
}
},
validate : function() {

var obj = this,
field = obj.field,
errorclass = "errorlist",
errorlist = $(document.createelement("ul")).addclass(errorclass),
types = field.attr("validation").split(" "),
container = field.parent(),
errors = [];

field.next(".errorlist").remove();
for (var type in types) {
var rule = $.validation.getrule(types[type]);
if(!rule.check(field.val())) {
container.addclass("error");
errors.push(rule.msg);
}
}
if(errors.length) {
obj.field.unbind("keyup")
obj.attach("keyup");
field.after(errorlist.empty());
for(error in errors) {

errorlist.append("<li>"+ errors[error] +"</li>");
}
obj.valid = false;
}
else {
errorlist.remove();
container.removeclass("error");
obj.valid = true;
}
}
}

/*
validation extends jquery prototype
*/
$.extend($.fn, {

validation : function() {

var validator = new form($(this));
$.data($(this)[0], 'validator', validator);

$(this).bind("submit", function(e) {
validator.validate();
if(!validator.isvalid()) {
e.preventdefault();
}
});
},
validate : function() {

var validator = $.data($(this)[0], 'validator');
validator.validate();
return validator.isvalid();

}
});
$.validation = new validation();
})(jquery);
</script>
</head>
<body>
<form action="#demo-form" id="demo-form">
<fieldset>
<legend>test fields</legend>
<div>
<label for="demo-field-1">required field</label>
<input id="demo-field-1" validation="required" name="demo-field-1" type="text" />
</div>
<div>
<label for="demo-field-2">email field</label>
<input id="demo-field-2" validation="email" name="demo-field-2" type="text" />
</div>
<div>
<label for="demo-field-3">url field</label>
<input id="demo-field-3" validation="url" name="demo-field-3" type="text" />
</div>
</fieldset>
<div class="submit-area">
<input value="validate!" type="submit" />
</div>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航