js扩展方法

最新推荐文章于 2019-10-18 14:42:35 发布

shyaideguo

最新推荐文章于 2019-10-18 14:42:35 发布

阅读量484

点赞数

分类专栏： JQuery 文章标签： javascript 扩展

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

js没有delete方法，但是js有截取和拼接的方法，我们可以通过已有的方法实现js的删除方法

Array.prototype.del = function(n) {
if (n < 0){
return this;
}else{
return this.slice(0, n).concat(this.slice(n + 1, this.length));
}
/*
concat方法：返回一个新数组，这个新数组是由两个或更多数组组合而成的。
这里就是返回this.slice(0,n)/this.slice(n+1,this.length)
组成的新数组，这中间，刚好少了第n项。
slice方法：返回一个数组的一段，两个参数，分别指定开始和结束的位置。
*/
}

JQuery validate增加方法

jQuery.validator.addMethod("filterName", function (value, element) {
var reg =/^[a-zA-Z0-9\u4e00-\u9fa5]+$/;
return reg.test(value);
});

在字段的判断的时候使用 filterName: true

例如

$("#user_form").validate({
onkeyup : false,
rules : {
"username" : {
rangelength:[6,16],
required : true,
filterName: true,
remote: "${pageContext.request.contextPath}/permission/checkuser"
},
"password" : {
rangelength:[6,16],
required : true
},
"confirmPassword" : {
rangelength:[6,16],
required : true,
equalTo:"#userPassword"
}
},
messages:{
"username" : {
rangelength : "长度必须为6-16个字符",
required : "请输入用户名",
filterName:"含有非法字符",
remote:"该用户名已被注册"
},
"password" : {
rangelength : "密码长度必须为6-16个字符",
required : "请输入密码"
},
"confirmPassword" : {
rangelength : "密码长度必须为6-16个字符",
required :"请确认密码",
equalTo:"两次密码输入不相同"
}
}
});

jQuery.validator.addMethod("filterName", function (value, element) {
var reg =/^[a-zA-Z0-9\u4e00-\u9fa5]+$/;
return reg.test(value);
});

项目中使用的jQuery添加的校验的方法

$(document).ready(function(){
5
6/**//* 设置默认属性 */
7$.validator.setDefaults({
8 submitHandler: function(form){
9 form.submit();
10 }
11});
12
13// 字符验证
14jQuery.validator.addMethod("stringCheck",function(value, element){
15return this.optional(element)|| /^[\u0391-\uFFE5\w]+$/.test(value);
16},"只能包括中文字、英文字母、数字和下划线");
17
18// 中文字两个字节
19jQuery.validator.addMethod("byteRangeLength",function(value, element, param){
20var length= value.length;
21for(var i= 0; i< value.length; i++){
22if(value.charCodeAt(i)> 127){
23 length++;
24 }
25 }
26return this.optional(element)|| ( length>= param[0]&& length <= param[1] );
27},"请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
28
29// 身份证号码验证
30jQuery.validator.addMethod("isIdCardNo",function(value, element){
31return this.optional(element)|| isIdCardNo(value);
32},"请正确输入您的身份证号码");
33
34// 手机号码验证
35jQuery.validator.addMethod("isMobile",function(value, element){
36var length= value.length;
37var mobile= /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
38return this.optional(element)|| (length== 11 && mobile.test(value));
39},"请正确填写您的手机号码");
40
41// 电话号码验证
42jQuery.validator.addMethod("isTel",function(value, element){
43var tel= /^\d{3,4}-?\d{7,9}$/;//电话号码格式010-12345678
44 return this.optional(element)|| (tel.test(value));
45},"请正确填写您的电话号码");
46
47// 联系电话(手机/电话皆可)验证
48jQuery.validator.addMethod("isPhone",function(value,element){
49var length= value.length;
50var mobile= /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
51var tel= /^\d{3,4}-?\d{7,9}$/;
52return this.optional(element)|| (tel.test(value)|| mobile.test(value));
53
54},"请正确填写您的联系电话");
55
56// 邮政编码验证
57jQuery.validator.addMethod("isZipCode",function(value, element){
58var tel= /^[0-9]{6}$/;
59return this.optional(element)|| (tel.test(value));
60},"请正确填写您的邮政编码");
61
62//开始验证
63$('#submitForm').validate({
64/**//* 设置验证规则 */
65 rules: {
66 username: {
67 required:true,
68 stringCheck:true,
69 byteRangeLength:[3,15]
70 },
71 email:{
72 required:true,
73 email:true
74 },
75 phone:{
76 required:true,
77 isPhone:true
78 },
79 address:{
80 required:true,
81 stringCheck:true,
82 byteRangeLength:[3,100]
83 }
84 },
85
86/**//* 设置错误信息 */
87 messages: {
88 username: {
89 required:"请填写用户名",
90 stringCheck:"用户名只能包括中文字、英文字母、数字和下划线",
91 byteRangeLength:"用户名必须在3-15个字符之间(一个中文字算2个字符)"
92 },
93 email:{
94 required:"请输入一个Email地址",
95 email:"请输入一个有效的Email地址"
96 },
97 phone:{
98 required:"请输入您的联系电话",
99 isPhone:"请输入一个有效的联系电话"
100 },
101 address:{
102 required:"请输入您的联系地址",
103 stringCheck:"请正确输入您的联系地址",
104 byteRangeLength:"请详实您的联系地址以便于我们联系您"
105 }
106 },
107
108/* 设置验证触发事件*/
109 focusInvalid:false,
110 onkeyup:false,
111
112/**//* 设置错误信息提示DOM */
113 errorPlacement: function(error, element){
114 error.appendTo( element.parent());
115 },
116
117});
118
119});

supplier-commons-vacation.js

//定义订单的公共的函数方法
function define_common_method(){

//设置默认的操作
$.validator.setDefaults({
submitHandler: function(form) { form.submit(); }
});

//添加自定义校验函数
$.validator.addMethod("charNo",function(value,element) {
var length = value.length;
var your_tel =/[\W]/g;
return this.optional(element) || (length<=8&&!your_tel.test(value));
},"请输入英文字符或数字！");

//添加验证操作名称的校验函数
$.validator.addMethod("charString",function(value,element) {
var length = value.length;
var your_tel =/[^\a-zA-Z\u4E00-\u9FA5]/g;
var your_tel2=/^[A-Za-z]*$/;
return this.optional(element) || (length<=20&&!your_tel.test(value));
},"请输入中文或英文名称");

//验证手机号码（仅仅13和15开头）
$.validator.addMethod("isPhone", function(value,element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
var tel = /^\d{3,4}-?\d{7,9}$/;
return this.optional(element) || (tel.test(value) || mobile.test(value));
}, "请正确填写您的联系电话或者手机");

}

supplier-finance.js

jQuery(function($) {

//绑定所有的事件
$(document).ready(function() {
bind_component_event();
});

//绑定的公共的事件
function bind_component_event() {
//定义一些公共的方法
define_common_method();

//环游供应商付款的验证（度假）
bind_checkCondition_component_event();

//环游供应商付款验证的（供应商）
bind_supplierConditionForm_component_event();
}

//环游供应商付款（度假）的验证
function bind_checkCondition_component_event() {

//待收款款订单验证
$("#checkConditionForm").validate({
event: "submit",
errorPlacement: function(error, element) {
},
rules:{
"searchCon.accountNo":{
charNo:true
},
"searchCon.supplierName":{
charString:true
}
},
messages:{
"searchCon.accountNo":{
charNo:"请输入正确的对账编号！"
},
"searchCon.supplierName":{
charString:"请输入正确的供应商名称！"
}
},

//设置验证触发事件
focusInvalid:false,
onkeyup:false,

//设置错误信息提示DOM
errorPlacement:function(error,element){
error.appendTo(element.parent());
}

});
}
//环游供应商付款的验证（供应商）
function bind_supplierConditionForm_component_event() {

//待收款款订单验证
$("#supplierConditionForm").validate({
event: "submit",
errorPlacement: function(error, element) {
},
rules:{
"searchCon.accountNo":{
charNo:true
},
"searchCon.supplierName":{
charString:true
}
},
messages:{
"searchCon.accountNo":{
charNo:"请输入正确的对账编号！"
},
"searchCon.supplierName":{
charString:"请输入正确的供应商名称！"
}
},

//设置验证触发事件
focusInvalid:false,
onkeyup:false,

//设置错误信息提示DOM
errorPlacement:function(error,element){
error.appendTo(element.parent());
}
});
}

});

关于jQuery的校验的API

http://docs.jquery.com/Plugins/Validation/Validator/addMethod

http://www.shopxx.net/html/news/2009/1201/59.html

http://jquery.bassistance.de/api-browser/plugins.html

1.非负整数 /^\d+$/
2.正整数 /^[0-9]*[1-9][0-9]*$/
3.非正整数 /^((-\d+)|(0+))$/
4.负整数 /^-[0-9]*[1-9][0-9]*$/
5.整数 /^-?\d+$/
6.非负浮点数 /^\d+(\.\d+)?$/
7.正浮点数 /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/
8.非正浮点数 /^((-\d+(\.\d+)?)|(0+(\.0+)?))$/
9.负浮点数 /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/
10.浮点数 /^(-?\d+)(\.\d+)?$/
11.数字 /^\d+(\.{1}\d+)?$/
12.由26个英文字母组成的字符串 /^[A-Za-z]+$/
13.由26个英文字母的大写组成的字符串 /^[A-Z]+$/
14.由26个英文字母的小写组成的字符串 /^[a-z]+$/
15.由数字和26个英文字母组成的字符串 /^[A-Za-z0-9]+$/
16.由数字、26个英文字母或者下划线组成的字符串 /^\w+$/
17.匹配所有单字节长度的字符组成的字符串 /^[\x00-\xff]+$/
18.匹配所有双字节长度的字符组成的字符串 /^[^\x00-\xff]+$/
19.字符串是否含有双字节字 /[^\x00-\xff]+/
20.email地址 /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
或者 /w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*/
21.url地址 /^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$/
或者 /http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?/
22.匹配中文字符的正则 /[u4e00-u9fa5]/
23.匹配双字节字符(包括汉字在内) /[^x00-xff]/
应用：计算字符串的长度(一个双字节字符长度计2，ASCII字符计1)
String.prototype.len=function(){
return this.replace([^x00-xff]/g,”aa”).length;
}
24.匹配空行的正则 /n[s| ]*r/
25.匹配HTML标记的正则 /<(.*)>.*</1>|<(.*) />/
26.匹配首尾空格的正则 /(^s*)|(s*$)/
应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现，如下：
String.prototype.trim = function(){
return this.replace(/(^s*)|(s*$)/g, “”);
}
27.匹配IP地址的正则 /(d+).(d+).(d+).(d+)/
应用：利用正则表达式匹配IP地址，并将IP地址转换成对应数值的Javascript程序：
function IP2V(ip){
re=/(d+).(d+).(d+).(d+)/g;
if(re.test(ip)){
return RegExp.$1*Math.pow(255,3))+
RegExp.$2*Math.pow(255,2))+
RegExp.$3*255+RegExp.$4*1;
}
else{
throw new Error(“Not a valid IP address!”);
}
}
其实直接用split函数来分解可能更简单，程序如下：
var ip=”10.100.20.168″;
ip=ip.split(“.”);
alert(“IP值是：”+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1));
28.去除字串中重复的字符的javascript程序
var s=”abacabefgeeii”;
var s1=s.replace(/(.).*1/g,”$1″);
var re=new RegExp(“["+s1+"]“,”g”);
var s2=s.replace(re,”");
alert(s1+s2); //结果为：abcefgi
/*使用后向引用取出包括重复的字符，再以重复的字符建立第二个表达式，取到不重复的字符，
两者串连。这个方法对于字符顺序有要求的字符串可能不适用。*/
29.用正则表达式从URL地址中提取文件名的javascript程序
s=”http://www.google.com/page1.htm“;
s=s.replace(/(.*/){0,}([^.]+).*/ig,”$2″);
alert(s); //结果为page1
30.限制表单文本框输入内容
只能输入中文：
οnkeyup=”value=value.replace(/[^u4E00-u9FA5]/g,”)”
onbeforepaste=”clipboardData.setData(‘text’,
clipboardData.getData(‘text’).replace(/[^u4E00-u9FA5]/g,”))”
只能输入全角字符：
οnkeyup=”value=value.replace(/[^uFF00-uFFFF]/g,”)”
onbeforepaste=”clipboardData.setData(‘text’,
clipboardData.getData(‘text’).replace(/[^uFF00-uFFFF]/g,”))”
只能输入数字：
οnkeyup=”value=value.replace(/[^d]/g,”)”
onbeforepaste=”clipboardData.setData(‘text’,
clipboardData.getData(‘text’).replace(/[^d]/g,”))”
只能输入数字和英文：
οnkeyup=”value=value.replace(/[W]/g,”)”
onbeforepaste=”clipboardData.setData(‘text’,
clipboardData.getData(‘text’).replace(/[^d]/g,”))”
31.验证文件名由字母，数字，下滑线组成 /^((\w+)(\.{1})(\w+))$/
32.匹配日期(1900-1999)
/^19\d{2}-((0[1-9])|(1[0-2]))-((0[1-9])|([1-2][0-9])|(3([0|1])))$/
33.匹配日期(2000-2999)
/^20\d{2}-((0[1-9])|(1[0-2]))-((0[1-9])|([1-2][0-9])|(3([0|1])))$/
34.匹配日期时间
/^(1|2\d{3}-((0[1-9])|(1[0-2]))-((0[1-9])|([1-2][0-9])|(3([0|1]))))( (\d{2}):(\d{2}):(\d{2}))?$/