JS form表单提交时的简单验证
2012-06-04 16:45:07 来源:WEB开发网* options:{
* pid:"" --- 要验证的input的父id,必须是id,写法为:#id
* input_array:[ -- input_array是要进行验证的input组件的数组
* {
* name:["#text1","#text2"], -- 必须 一个或多个,input组件的名字,是一个数组(多个组件的用同一个规则验证)
* reg:null, -- 不必须 自定义函数,函数必须返回来true or false
* length:10, -- 不必须 数字长度,type为6时必须传入
* type:[0,1,2...] -- 必须,一个或多个,验证类型
0 代表 非空
1 代表 纯数字
2 代表 email
3 代表 浮点型
4 代表 金钱
5 代表 数字或字母或数字字母混合体
6 代表 长度
7 代表 qq号码
8 代表 手机号码
9 代表 中文
10 代表 邮编
11 代表 字符
12 代表 字符\数字\_开头
13 代表 url
14 代表 自定义
15 代表 通过ajax去验证
* }...
* ]
* }
*@return: result_array 数组 每个元素是一个json字符串格式: {"name":"#name","result":[{"type":1,"re":false}...]}
JS代码:
//{pid:"#form",input_array:[{name:["#name","#content"],reg:v,length:10,type:[1,2]},{name:["#con1"],length:10,type:[1]}],nullrela:1};
/**
*@author:郑允安
*@email:zhengyun_an@163.com
*@version 1.0
*@param:
* options:{
* pid:"" --- 要验证的input的父id,必须是id,写法为:#id
* input_array:[ -- input_array是要进行验证的input组件的数组
* {
* name:["#text1","#text2"], -- 必须 一个或多个,input组件的名字,是一个数组(多个组件的用同一个规则验证)
* reg:null, -- 不必须 自定义函数,函数必须返回来true or false
* length:10, -- 不必须 数字长度,type为6时必须传入
* type:[0,1,2...] -- 必须,一个或多个,验证类型
0 代表 非空
1 代表 纯数字
2 代表 email
3 代表 浮点型
4 代表 金钱
5 代表 数字或字母或数字字母混合体
6 代表 长度
7 代表 qq号码
8 代表 手机号码
9 代表 中文
10 代表 邮编
11 代表 字符
12 代表 字符\数字\_开头
13 代表 url
14 代表 自定义
15 代表 通过ajax去验证
* }...
* ]
* }
*@return: result_array 数组 每个元素是一个json字符串格式: {"name":"#name","result":[{"type":1,"re":false}...]}
*
*/
$.extend({
inputValidate:function(options) {
inputValidateVerion2.options=options;
return inputValidateVerion2._startValidate();;
}
})
var inputValidateVerion2 = {
options:{
pid:"",
input_array:[{name:[],reg:null,length:0,type:[],url:''}]
},
_startValidate:function(){
input_obj_array = this._getInputObjsArray(this.options.pid,this.options.input_array);
result_array=[];
if(input_obj_array!=null&&input_obj_array.length>0){
a_len = input_obj_array.length;
for(var i=0;i<a_len;i++){
name = input_obj_array[i][0];
reg = input_obj_array[i][1];
len = input_obj_array[i][2];
type = input_obj_array[i][3];
t_len = type.length;
t_re_json = new StringBuffer();
t_re_json_sub = new StringBuffer();
for(var j=0;j<t_len;j++){
validate.options={type:type[j],reg:reg,value:$(name).val(),length:len};
result = validate._control();
if(result!=null&&result.length>0){
if(result[1]==false){
t_re_json_sub.append('{');
t_re_json_sub.append('"type":"');
t_re_json_sub.append(result[0]);
t_re_json_sub.append('","re":"');
t_re_json_sub.append(result[1])
t_re_json_sub.append('"');
t_re_json_sub.append('},');
}
}
}
if(t_re_json_sub.toString().length>0){
t_re_json.append('{"name":"');
t_re_json.append(name);
t_re_json.append('","result":[');
t_re_json.append(t_re_json_sub.toString().substring(0,t_re_json_sub.toString().length-1));
t_re_json.append(']}');
result_array.push(t_re_json.toString());
}
}
}
return result_array;
},
_getInputObjsArray:function(pid,input_objs){
obj_array = [];
if($.trim(pid)!=""){
var p_obj = $(pid);
if(p_obj!=undefined){
if(input_objs!=null&&input_objs.length>0){
len = input_objs.length;
for(var i=0;i<len;i++){
names = input_objs[i].name;
n_len = names.length;
for(var j=0;j<n_len;j++){
obj_array.push([names[j],input_objs[i].reg,input_objs[i].length,input_objs[i].type]);
}
}
}else{
alert('input_objs is null or length is 0!');
}
}else{
alert('p_objs is null or undefined!');
}
}
return obj_array;
}
};
var validate = {
options:{type:1,value:"",length:0,reg:null},
_control:function(){
result = [];
result.push(this.options.type);
if(this.options.type==0){
result.push(this._nullV(this.options.value));
}else if(this.options.type==1){//数字 测试通过
result.push(this._numV(this.options.value));
}else if(this.options.type==2){//email 测试通过
result.push(this._emailV(this.options.value));
}else if(this.options.type==3){//浮点型 测试通过
result.push(this._floatV(this.options.value));
}else if(this.options.type==4){//金钱 未测试
result.push(this._moneyV(this.options.value));
}else if(this.options.type==5){//数字或字母或数字字母混合体 测试通过
result.push(this._numstrV(this.options.value));
}else if(this.options.type==6){//长度 测试通过
result.push(this._lengthV(this.options.value,this.options.length));
}else if(this.options.type==7){//qq号码 测试通过
result.push(this._qqV(this.options.value));
}else if(this.options.type==8){//手机号码 测试通过
result.push(this._mobileV(this.options.value));
}else if(this.options.type==9){//中文 测试通过
result.push(this._chinaV(this.options.value));
}else if(this.options.type==10){//邮编 测试通过
result.push(this._postIdV(this.options.value));
}else if(this.options.type==11){//字符 测试通过
result.push(this._strV(this.options.value));
}else if(this.options.type==12){//字符\数字\_开头 测试通过
result.push(this._beginNumStrV(this.options.value));
}else if(this.options.type==13){//url 测试通过
result.push(this._urlV(this.options.value));
}else if(this.options.type==14){//自定义 测试通过
if($.type(this.options.reg)=='function'){
result.push(this.options.reg(this.options.value));
}else{
alert('reg is not function!');
}
}else{
alert('type is error!');
}
return result;
},
_numV:function(value){
var pattern = /^[\d]+$/;
var re = pattern.test(value);
return re;
},
_emailV:function(value){
var pattern = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
var re = pattern.test(value);
return re;
},
_nullV:function(value){
re = false;
try{
if(value!=null&&value!=undefined&&$.trim(value)!=""){
re=true;
}
}catch(e){
}
return re;
},
_floatV:function(value){
var pattern = /^[1-9][0-9]*\.[0-9]+$/;
var re = pattern.test(value);
return re;
},
_moneyV:function(value){
return false;
},
_strV:function(value){
var pattern=/^[a-zA-Z]+$/;;
var re = pattern.test(value);
return re;
},
_beginNumStrV:function(value){
var pattern=/^([0-9a-zA-z_]{1})([\w]*)$/;
var re = pattern.test(value);
return re;
},
_numstrV:function(value){
var pattern=/^[A-Za-z0-9]+$/;
var re = pattern.test(value);
return re;
},
_lengthV:function(value,len){
re = false;
if(value!=null&&value!=""&&value.length<=parseInt(len)){
re = true;
}
return re;
},
_qqV:function(value){
var pattern = /^[1-9]\d{4,8}$/;
var re = pattern.test(value);
return re;
},
_mobileV:function(value){
var pattern = /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/;
var re = pattern.test(value);
return re;
},
_chinaV:function(value){
var pattern=/^[\Α-\¥]+$/;
var re = pattern.test(value);
return re;
},
_postIdV:function(value){
var pattern=/^\d{6}$/;
var re = pattern.test(value);
return re;
},
_urlV:function(value){
var pattern=/^(http\:\/\/)?([a-z0-9][a-z0-9\-]+\.)?[a-z0-9][a-z0-9\-]+[a-z0-9](\.[a-z]{2,4})+(\/[a-z0-9\.\,\-\_\%\?\=\&]?)?$/i;
var re = pattern.test(value);
return re;
}
};
JS util.js源代码:
function StringBuffer() {
this.__strings__ = [];
}
StringBuffer.prototype.append = function (str) {
this.__strings__.push(str);
};
StringBuffer.prototype.toString = function () {
return this.__strings__.join("");
};
Test静态页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript" src="/js/jquery/jquery1.5.js"></script>
<script type="text/javascript" language="javascript" src="/js/util.js"></script>
<script type="text/javascript" language="javascript" src="/js/inputValidateVerion2.js"></script>
</head>
<body>
<div>
<form id="form">
name:<input name="name" id="name" />
<br/>
content:<input name="content" id="content"/>
<br/>
con1:<input name="con1" id="con1"/>
<br/>
<input type="submit" value="提交"/>
</form>
<div id="contentDiv">
</div>
</div>
<script>
$(function(){
$("#form").bind("submit",function(){
function v(text){return false;}
function v1(text){return true;}
var result_array = $.inputValidate({pid:"#form",input_array:[{name:["#name"],reg:v,length:3,type:[0,6]},{name:["#content"],reg:v1,length:5,type:[0,6]},{name:["#con1"],length:10,type:[0,6]}]});
if(result_array.length==0){
this.submit();
}else{
var len = result_array.length;
var result_str = new StringBuffer();
for(var i=0;i<len;i++){
var r_a = result_array[i];
var obj = $.parseJSON(r_a);
name = obj.name;
re = obj.result;
o_len = re.length;
for(var j=0;j<o_len;j++){
type = re[j].type;
b_re = re[j].re;
result_str.append(" name ... "+name+" type ... "+type + " re ... "+b_re);
}
}
$("#contentDiv").text(result_str.toString());
return false;
}
});
})
</script>
</body>
</html>
赞助商链接
