Jquery 表单验证类介绍与实例

[html]

复制代码 代码如下:

<form action="" method="post" id="formValidate">
数值:<input name="" type="text" validate="number" /><span></span><br/>
浮点型:<input name="" type="text" validate="decimal" /><span></span><br/>
英文:<input name="" type="text" validate="english" /><span></span><br/>
大写英文:<input name="" type="text" validate="upper_english" /><span></span><br/>
小写英文:<input name="" type="text" validate="lower_english" /><span></span><br/>
邮件格式:<input name="" type="text" validate="email" /><span></span><br/>
是否包含中文:<input name="" type="text" validate="chinese" /><span></span><br/>
URL:<input name="" type="text" validate="url" /><span></span><br/>
电话号码:<input name="" type="text" validate="phone" /><span></span><br/>
IP地址:<input name="" type="text" validate="ip" /><span></span><br/>
金额:<input name="" type="text" validate="money" /><span></span><br/>
数值或者英文或者_:<input name="" type="text" validate="number_letter" /><span></span><br/>
邮政编码:<input name="" type="text" validate="zip_code" /><span></span><br/>
可用账号:<input name="" type="text" validate="account" /><span></span><br/>
QQ:<input name="" type="text" validate="qq" /><span></span><br/>
身份证:<input name="" type="text" validate="card" /><span></span><br/>
数值 允许为空:<input name="" type="text" validate="number" empty='yes' /><span></span><br/>
数值 长度 1-3:<input name="" type="text" validate="number" min=1 max=3 /><span></span><br/>
数值 长度 1-3 允许为空:<input name="" type="text" validate="number" min=1 max=3 empty='yes'/><span></span><br/>
<input name="" type="submit" />
</form>
<script src="jquery.js" type="text/javascript"></script>
<script src="formValidate.js" type="text/javascript"></script>
<script type="text/javascript">
var formValidate = new formValidate();
formValidate.init({});
</script>

[javascript]
复制代码 代码如下:

/*
* 通用JS验证类
* 使用方法:
* var formValidate = new formValidate();
* formValidate.init({});
* 注意:
* <form action="" method="post" id="formValidate">
* id为formValidate
*
* <input name="" type="text" validate="zip_code" empty="yes" min=10 max=10 /><span></span>
* validate="zip_code" 验证是否是邮政编码
* empty="yes" 验证是否允许为空
* min=10 最小长度
* max=10 最大长度
* <span></span> 显示提示内容
*/
var formValidate = function () {

var _this = this;

this.options = {
number : {reg : /^[0-9]+$/, str : '必须为数字'},
decimal : {reg : /^[-]{0,1}(\d+)[\.]+(\d+)$/ , str : '必须为DECIMAL格式'},
english : {reg : /^[A-Za-z]+$/, str : '必须为英文字母'},
upper_english : {reg : /^[A-Z]+$/, str : '必须为大写英文字母'},
lower_english : {reg : /^[a-z]+$/, str : '必须为小写英文字母'},
email : {reg : /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/, str : 'Email格式不正确'},
chinese : {reg : /[\u4E00-\u9FA5\uf900-\ufa2d]/ig, str : '必须含有中文'},
url : {reg : /^[a-zA-z]+:\/\/[^s]*/, str : 'URL格式不正确'},
phone : {reg : /^[1][3][0-9]{9}$/ , str : '电话号码格式不正确'},
ip : {reg : /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/ , str : 'IP地址格式不正确'},
money : {reg : /^[0-9]+[\.][0-9]{0,3}$/ , str : '金额格式不正确'},
number_letter : {reg : /^[0-9a-zA-Z\_]+$/ , str : '只允许输入英文字母、数字、_'},
zip_code : {reg : /^[a-zA-Z0-9 ]{3,12}$/ , str : '邮政编码格式不正确'},
account : {reg : /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/ , str : '账号名不合法,允许5-16字符,字母下划线和数字'},
qq : {reg : /[1-9][0-9]{4,}/ , str : 'QQ账号不正确'},
card : {reg : /^(\d{6})(18|19|20)?(\d{2})([01]\d)([0123]\d)(\d{3})(\d|X)?$/ , str : '身份证号码不正确'},
};

//初始化 绑定表单 选项
this.init = function (options) {
this.setOptions(options);
this.checkForm();
};

//设置参数
this.setOptions = function (options) {
for (var key in options) {
if (key in this.options) {
this.options[key] = options[key];
}
}
};

//检测表单 包括是否为空,最大值 最小值,正则验证
this.checkForm = function () {
$("#formValidate").submit(function () {
var formChind = $("#formValidate").children();
var testResult = true;
formChind.each(function (i) {
var child = formChind.eq(i);
var value = child.val();
var len = value.length;
var childSpan = child.next();

//属性中是否为空的情况
if (child.attr('empty')) {
if (child.attr('empty') == 'yes' && value == '') {
if (childSpan) {
childSpan.html('');
}
return;
}
}

//属性中min 和 max 最大和最小长度
var min = null;
var max = null;
if (child.attr('min')) min = child.attr('min');
if (child.attr('max')) max = child.attr('max');
if (min && max) {
if (len < min || len > max) {
if (childSpan) {
childSpan.html('');
childSpan.html(' 字符串长度在' + min + '与' + max + '之间');
testResult = false;
return;
}
}
} else if (min) {
if (len < min) {
if (childSpan) {
childSpan.html('');
childSpan.html(' 字符串长度应大于' + min);
testResult = false;
return;
}
}
} else if (max) {
if (len > max) {
if (childSpan) {
childSpan.html('');
childSpan.html(' 字符串长度应小于' + max);
testResult = false;
return;
}
}
}

//正则校验
if (child.attr('validate')) {
var type = child.attr('validate');
var result = _this.check(value, type);
if (childSpan) {
childSpan.html('');
if (result != true) {
childSpan.html(' ' + result);
testResult = false;
}
}
}

});
return testResult;
});
};

//检测单个正则选项
this.check = function (value, type) {
if (this.options[type]) {
var val = this.options[type]['reg'];
if (!val.test(value)) {
return this.options[type]['str'];
}
return true;
} else {
return '找不到该表单验证正则项';
}
};


}

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。

JS 文件大小判断的实现代码 - 2015-04-16 14:04:59

方法一,利用ActiveX控件实现: 复制代码 代码如下: script type="text/javascript" function getFileSize(filePath) { var fso = new ActiveXObject("Scripting.FileSystemObject"); alert("文件大小为:"+fso.GetFile(filePath).size); } /script body INPUT TYPE="file" NAME="file" SIZE="30" onch

Jquery瀑布流插件使用介绍 - 2015-04-16 14:04:59

瀑布流布局浅析 浅谈个人在瀑布流网页的实现中遇到的问题和解决方法 折腾:瀑布流布局(基于多栏列表流体布局实现) javascript 瀑布流 、 各大瀑布流简析与建议 因为自己用jquery比较多,便萌生了把瀑布流做成插件的想法,图片就借用迅雷UED上的那些美图吧。 先看看 Demo 把代码放出来吧 复制代码 代码如下: ;(function($){ var //参数 setting={ column_width:204,//列宽 column_className:'waterfall_column',/
http://r.qzone.qq.com/cgi-bin/user/cgi_personal_card?uin=指定QQ号码 将会返回下列内容: _Callback( {"uin":查询的QQ号码, "qzone":1, "nickname":"昵称", "offsetBirth":距离生日的天数, "avatarUrl":"查询的QQ号码头像地址"}); 针对这个内容,对_Callback事先进行实现,然后在script src=中放置上面的URL,利用返回的内容,使其执行_Callback函数,对数
复制代码 代码如下: function getElementsByClassName(n) { var classElements = [],allElements = document.getElementsByTagName('*'); for (var i=0; i allElements.length; i++ ) { if (allElements[i].className == n ) { classElements[classElements.length] = allElements[i]

js简单抽奖代码 - 2015-04-16 14:04:58

核心:js的Math对象和Array对象 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titlerandom/title style #awardListDom{width: 100%;} /style/headbody label for="awardListDom"奖项列表/labelbr input type="text" value="" id="awardListDom" br label for="num"抽到的奖/labelbr
当文本框获得焦点的时候,在文本框的下方显示一个浮动层。 当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层。 当用户点击浮动层时,改变文本框的值。 复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" head meta http-equiv="Content-Type" content="t
这个目前世界上最短的 Javascript 判定 IE 浏览器的方法来自俄罗斯!它已经在各版本的 IE 以及目前其他流行的浏览器上经过测试,基于 IE 的 Bug,微软虽然已经意识到,但是从来没有纠正过。 复制代码 代码如下: script type='text/javascript' var ie = !-[1,]; alert(ie); /script 以上代码运行结果:IE 下返回true,其他标准浏览器返回false。!-[1,],仅仅只有 6 bytes! 不过如果反过来判断,标准浏览器返回 tr
最近无聊,看着许多网站都有广告自动轮换,自己试着写了一个图片轮换,代码和功能都很简单,只支持IE的,FF的还要加些东东. xml文件:test.xml 复制代码 代码如下: ?xml version="1.0" encoding="gb2312"? ad neteasy path="image/64_jpg.jpg"http://www.163.com/neteasy sina path="image/lining.jpg"http://www.sina.com.cn/sina sohu path="ima

javascript实用方法总结 - 2015-04-16 11:04:05

引言: 本章没有深奥的讲解js一些底层原理,比如this指针、作用域、原型啦,涉及的都是一些有利于平时开发时简化代码,提高执行效率,或者说可以当做一种经验方法来使用,篇幅都不长,小步快跑的让你阅读完整篇文章,体验编程的快乐。 获取两个区间之内随机数 复制代码 代码如下: function getRandomNum(Min, Max){ // 获取两个区间之内随机数 // @逆火狂飙 提出有可能第一个参数大于第二个参数,所以增加一下判断更可靠 if (Min Max) Max = [Min, Min = M

JavaScript模板入门介绍 - 2015-04-16 11:04:05

比如要在一个列表中利用ajax插入一个li的时候,我会直接把数据跟html标签拼接成一句完整的html,然后插入到ul中。无论数据是从服务器端拿回的,或者是从用户的input输入中拿到的——无论哪种方法都是一样。 这个拼接过程放在JavaScript文件中,显得非常不优雅。如果还把style也放在JavaScript中,那数据、结构还有样式整个就是一锅粥了,要维护这样的代码会让人想自杀。最过分的就是把页面上最终要生成的HTML都直接放在服务器端,ajax吐出数据就包含了li标签,这样的页面几乎不存在扩展性了