当前位置: 代码迷 >> JavaScript >> js通用数据检测步骤(只完成js端大体功能,随会追加php端代码)
  详细解决方案

js通用数据检测步骤(只完成js端大体功能,随会追加php端代码)

热度:80   发布时间:2012-09-04 14:19:30.0
js通用数据检测方法(只完成js端大体功能,随会追加php端代码)

js通用数据检测方法,现在只完成js端大体功能,随会追加php端代码,用户只在php点指定检测类型,会自动生成客户端js检测代码,从而做到只定义一次检测代码实现客户端服务端全部检测,让程序制作更方便。下面退出js端的代码。

submitCheckFunc.js

//******************************************************
//通用JS客户端数据检测 v1.0.20110705
//作者:ljl_xyf? http://www.my400800.cn
//******************************************************/
function submitCheckFunc() {
??? this.CheckObjArr = Array();
}
submitCheckFunc.prototype={
??? ErrMsg:"",
??? ErrObj:Array(),
??? CheckObjArr:Array(),//要检测的对象存放
??? SetFocusObj:null,
??? //____________________对象空判断__________________
??? IsNotNull:function(checkId){
??????? var checkobj = this.GetElementX(checkId);
??????? strType = checkobj.type;
??????? if(strType.indexOf("select")<0 ){
??????????? var checkvalue = checkobj.value;
??????????? if(_IsNull(checkvalue)){
??????????????? return false;
??????????? }
??????? }else{
??????????? var blCheckOk = false;
??????????? for(var i=checkobj.length-1;i>=0;i--){
??????????????? var rOption =checkobj[i];
??????????????? if(rOption.selected == true){
??????????????????? if(rOption.value!=""){
??????????????????????? blCheckOk =? true;
??????????????????? }
??????????????? }
??????????? }
??????????? return blCheckOk;
??????? }
??????? return true;
??????????????
??? },
???
??? //____________________是否是数字检测______________
??? IsFloat:function(oNum){
??????? if(!oNum) return false;
??????? var strP=/^\d+(\.\d+)?$/;
??????? if(!strP.test(oNum)){
??????????? return false;
??????? }
??????? try{
??????????? if(parseFloat(oNum)!=oNum){
??????????????? return false;
??????????? }
??????? } catch(ex)?? {
??????????? return false;
??????? }
??????? return true;??


??? },

??? //____________________验证整数____________________
??? IsInteger:function(checkNum){
??????? var regu = /^[-]{0,1}[0-9]{1,}$/;
??????? return regu.test(checkNum);
??? },

??? //____________________验证邮箱地址________________
??? IsEmail:function(strEmail){
??????? if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
??????????? return true;
??????? return false;
??? },

??? //____________________是否小于最大值______________
??? IsLessMax:function(strValue,strMaxValue){
??????
??????? if(this.IsFloat(strValue)){??????????
??????????? if((strValue/1)>(strMaxValue/1)){
??????????????? return false;
??????????? }
??????? }
??????? return true;
???????????????
??? },

??? //____________________是否大于最小值______________
??? IsGreaterMin:function(strValue,strMaxValue){
??????? if(this.IsFloat(strValue)){
??????????? if((strValue/1)<(strMaxValue/1)){
??????????????? return false;
??????????? }
??????? }
??????? return true;
??? },
???
??? //____________________是否小于最大长度____________
??? IsLessMaxLen:function(strValue,iMaxlen){
??????? if(!this._isNull(strValue)){
??????????? if(strValue.length>iMaxlen){
??????????????? return false;
??????????? }???????????
??????? }
??????? return true;
??? },
???
??? //____________________是否大于最小长度____________
??? IsGreaterMinLen:function(strValue,iMinlen){
??????? if(!this._isNull(strValue)){
??????????? if(strValue.length<iMinlen){
??????????????? return false;
??????????? }
??????? }
??????? return true;
??? },
???
??? //____________________是否是日期检测______________
??? IsDate:function(strValue){
??????? //如果为空,则通过校验
??????? if(this._isNull(strValue))
??????????? return true;
??????? var pattern = /^((d{4})|(d{2}))-(d{1,2})-(d{1,2})$/g;
??????? if(!pattern.test(strValue))
??????????? return false;
??????? var arrDate = strValue.split("-");
??????? if(parseInt(arrDate[0],10) < 100)
??????????? arrDate[0] = 2000 + parseInt(arrDate[0],10) + "";
??????? var date = new Date(arrDate[0],(parseInt(arrDate[1],10) -1)+"",arrDate[2]);
??????? if(date.getYear() == arrDate[0]
??????????? && date.getMonth() == (parseInt(arrDate[1],10) -1)+""
??????????? && date.getDate() == arrDate[2])
??????????? return true;
??????? else
??????????? return false;

??? },

??? //____________________数据检测___________________
??? Check:function(){???????
??????? this.ErrMsg="";??????
??????? this.ErrObj = Array();
??????? var checkOneObj = null;
??????? this.SetFocusObj = null;
??????? //错误信息样式清除
??????? this.Clear();
??????? //项目信息检测
??????? for(var i=0;i<this.CheckObjArr.length;i++){
??????????? checkOneObj = this.CheckObjArr[i];
??????????? var checkOnedataObj =null;
??????????? for(var j=0;j<checkOneObj[2].length;j++){
??????????????? checkOnedataObj = checkOneObj[2][j];
??????????????? var checkObj = this.GetElementX(checkOneObj[0]);
??????????????? var checkFunc;
??????????????? if("IsNotNull"==checkOnedataObj[0]){
??????????????????? checkFunc="this."+checkOnedataObj[0]+"('"+checkOneObj[0]+"','"+checkOnedataObj[1]+"')";
??????????????? }else{
??????????????????? checkFunc="this."+checkOnedataObj[0]+"('"+checkObj.value+"','"+checkOnedataObj[1]+"')";
??????????????? }

??????????????? //alert(checkFunc);
??????????????? var checkBL = eval(checkFunc);
??????????????? if(!checkBL){
??????????????????? this.ErrMsg+="<li>"+checkOnedataObj[2]+"</li>";
??????????????????? checkObj.style.backgroundColor="yellow";
??????????????????? checkObj.title=checkOnedataObj[2];
??????????????????? if(this.SetFocusObj==null){
??????????????????????? this.SetFocusObj=checkObj;???????????????????????
??????????????????? }
??????????????????? break;
??????????????? }????????
??????????? }???????????
??????? }

???????
??????? if(this._isNull(this.ErrMsg)){
??????????? return true;
??????? }else{
??????????? var errMsgObj = this.GetElementX("errMsg");
??????????? if(errMsgObj){
??????????????? errMsgObj.innerHTML = this.ErrMsg;
??????????? }else{
??????????????? alert(this.ErrMsg);
??????????? }
??????????? this.SetFocusObj.focus();
??????????? return false;
??????? }
??? },
???
??? //____________________样式清除处理________________
??? Clear:function(){
??????? for(var i=0;i<this.CheckObjArr.length;i++){
??????????? checkOneObj = this.CheckObjArr[i];
??????????? var checkObj = this.GetElementX(checkOneObj[0]);
??????????? checkObj.style.backgroundColor="";
??????????? checkObj.title="";
??????????? var errMsgObj = this.GetElementX("errMsg");
??????????? if(errMsgObj){
??????????????? errMsgObj.innerHTML = "";
??????????? }
??????? }???????
??? } ,
??
??? //____________________添加要进行检测数据__________
??? AddCheckData:function(checkObj){
??????? this.CheckObjArr[this.CheckObjArr.length]=checkObj;
??? },

??? //******************************************通用函数************start************************
??? //____________________取得指定名称对象____________
??? GetElementX:function(objName){
??????? if(document.getElementById(objName)){
??????????? return document.getElementById(objName);
??????? }else if(document.getElementById(objName.split('$').join('_'))){
??????????? return document.getElementById(objName.split('$').join('_'));
??????? }else{
??????????? return null;
??????? }
??? },
???
??? //____________________项目空检测_________________
??? _isNull:function(value){
??????? var str = value;
??????? if(str.length==0){
??????????? return true;
??????? }else{
??????????? return false;
??????? }
??? }
//**********************************************通用函数*************end************************
}

测试用HTML文件

??<html>
??? <head>
??????? <title></title>
??????? <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">???????
??????? <script src="js/submitCheckFunc.js"></script>


??? </head>
??? <body>
?????? 姓名: <input id="name" value=""><br>
??????? 年龄:<input id="age" value=""><br>
??????? 网址:<input id="url" value="http://www.my400800.cn "><br>????
??????????? <script>
??????????????? function check(){?????????????????
??????????????????? var checkFrom = new submitCheckFunc();
??????????????????? checkFrom.AddCheckData(["name","姓名",[["IsNotNull","","姓名不能为空"],["IsLessMaxLen","10","姓名最大十个字符"]]]);
??????????????????? checkFrom.AddCheckData(["age","年龄",[["IsNotNull","","年龄不能为空"], ["IsInteger","","年龄输入非数值"],["IsLessMax","150","年龄最大不能超过150"]]]);
??????????????????? checkFrom.AddCheckData(["url","网址",[["IsNotNull","","网址不能为空"],["IsLessMaxLen","150","网址最大不能操作150个字符"]]]);
?
??????????????????? checkFrom.Check();
???????????????
????????????????
??????????????? }
??????????????
??????????? </script>?? ???????
??????????? <input type="button" value="检测测试" onclick="check();">

????
?????? <ul id="errMsg" style="color:red">


??????? </ul>
??? </body>
</html>

??

效果如下:

刚打开页面效果

姓名:
年龄:
网址:

单击检测后页面效果

姓名:
年龄:
网址:
  • 姓名不能为空
  • 年龄不能为空
  • 网址不能为空

输入数据检测结果

姓名:
年龄:
网址:
  • 姓名不能为空
  相关解决方案