`

javascript验证

 
阅读更多

为了提交web页面开发效率,自己封装了一套web页面输入框验证方法:

1、首先是ArrayList对象

该ArrayList对象和java中ArrayList对象用法基本一样,包含了java中ArrayList中大部分方法,为存取对象提供了便利。

/**********************************************************
* JavaScript实现的ArrayList类 
* 
* @author {yangl}
* @version $Revision: 0.5 $ $Date: 2008/04/02 15:00:00 $
* @description
* Method:
* add(element);
* addElementAt(index, element);
* contains(element);
* get(index);
* isEmpty(index);
* indexOf(element);
* lastIndexOf(element);
* remove()
* setElementAt(index, element);
* size();
* toString();
* @example
* var arrList = new ArrayList();
* //var arrList = new ArrayList(10);
* arrList.add("000");
* arrList.add("001");
* arrList.add("002");
*
*********************************************************/
// JavaScript ArrayList
/**
Method:
        add(element);
        addElementAt(index, element);
        contains(element);
        get(index);
        isEmpty(index);
        indexOf(element);
        lastIndexOf(element);
        remove(index);
        setElementAt(index, element);
        size();
        toString();
*/
/**
Example:
        var arrList = new ArrayList();
        //var arrList = new ArrayList(10);
        arrList.add("000");
        arrList.add("001");
        arrList.add("002");
*/
var ArrayList = function () {
    var args = ArrayList.arguments;
    var initialCapacity = 10;
    
    if (args != null && args.length > 0) {
        initialCapacity = args[0];
    }
    
    var elementData = new Array(initialCapacity);
    var elementCount = 0;
    
    this.size = function () {
        return elementCount;
    };
    
    this.add = function (element) {
        //alert("add");
        ensureCapacity(elementCount + 1);
        elementData[elementCount++] = element;
        return true;
    };
    
    this.addElementAt = function (index, element) {
        //alert("addElementAt");
        if (index > elementCount || index < 0) {
            alert("IndexOutOfBoundsException, Index: " + index + ", Size: " + elementCount);
            return;
            //throw (new Error(-1,"IndexOutOfBoundsException, Index: "+index+", Size: " + elementCount));
        }
        ensureCapacity(elementCount + 1);
        for (var i = elementCount + 1; i > index; i--) {
            elementData[i] = elementData[i - 1];
        }
        elementData[index] = element;
        elementCount++;
    };
    
    this.setElementAt = function (index, element) {
        //alert("setElementAt");
        if (index > elementCount || index < 0) {
            alert("IndexOutOfBoundsException, Index: " + index + ", Size: " + elementCount);
            return;
            //throw (new Error(-1,"IndexOutOfBoundsException, Index: "+index+", Size: " + elementCount));
        }
        elementData[index] = element;
    };
    
    this.toString = function () {
        //alert("toString()");
        var str = "{";
        for (var i = 0; i < elementCount; i++) {
            if (i > 0) {
                str += ",";
            }
            str += elementData[i];
        }
        str += "}";
        return str;
    };
    
    this.get = function (index) {
        //alert("elementAt");
        if (index >= elementCount) {
            alert("ArrayIndexOutOfBoundsException, " + index + " >= " + elementCount);
            return;
            //throw ( new Error( -1,"ArrayIndexOutOfBoundsException, " + index + " >= " + elementCount ) );
        }
        return elementData[index];
    };
    
    this.remove = function (index) {
        if (index >= elementCount) {
            alert("ArrayIndexOutOfBoundsException, " + index + " >= " + elementCount);
            //return;
            throw (new Error(-1, "ArrayIndexOutOfBoundsException, " + index + " >= " + elementCount));
        }
        var oldData = elementData[index];
        for (var i = index; i < elementCount - 1; i++) {
            elementData[i] = elementData[i + 1];
        }
        elementData[elementCount - 1] = null;
        elementCount--;
        return oldData;
    };
    
    this.isEmpty = function () {
        return elementCount == 0;
    };
    
    this.indexOf = function (elem) {
        //alert("indexOf");
        for (var i = 0; i < elementCount; i++) {
            if (elementData[i] == elem) {
                return i;
            }
        }
        return -1;
    };
    
    this.lastIndexOf = function (elem) {
        for (var i = elementCount - 1; i >= 0; i--) {
            if (elementData[i] == elem) {
                return i;
            }
        }
        return -1;
    };
    
    this.contains = function (elem) {
        return this.indexOf(elem) >= 0;
    };
    
    function ensureCapacity(minCapacity) {
        var oldCapacity = elementData.length;
        if (minCapacity > oldCapacity) {
            var oldData = elementData;
            var newCapacity = parseInt((oldCapacity * 3) / 2 + 1);
            if (newCapacity < minCapacity) {
                newCapacity = minCapacity;
            }
            elementData = new Array(newCapacity);
            for (var i = 0; i < oldCapacity; i++) {
                elementData[i] = oldData[i];
            }
        }
    }
};

 2、测试类

为了提高编程的灵活性,将每种检测情况封装成一个一个小测试类,比如是否可以为空,字符长度等,且每个测试类中必须有一个方法test用于检测输入框数据是否满足条件,满足返回1,否则返回0。

例如输入框不能为空:

/**********************************************************
 * 输入框不可以为空
 * @param lable  lable名称
 * @param input  输入框name
 * @returns
 **********************************************************/
function NoNullCellTest(lable, input){
	this.lableName = lable;
	this.inputName = input;
	this.test = function(){
		var inputObj = document.getElementsByName(this.inputName)[0];
		var str = inputObj.value;
		if(str == ''){
			alert(this.lableName+"不可以为空!");
			inputObj.focus();
			return 0;
		}
		return 1;
	};
}

 3、主测试对象

主测试对象是运用责任链模式,可以将各种测试类对象串联起来,便于检测输入框是否满足特定条件

 

/**********************************************************
 * 主测试对象(责任链模式)
 * 通过addTest方法将单元测试对象添加到列表中
 * test方法开始检测
 * @returns
 **********************************************************/
function MainTest(){
	this.arrList = new ArrayList();
	this.addTest=function(cellTest){
		this.arrList.add(cellTest);
		return this;
	};
	this.test=function(){
		for(var i = 0; i < this.arrList.size(); i++){
			var test = this.arrList.get(i);
			var returnValue = test.test();
			if(returnValue == 0){
				return 0;
			}
		}
		return 1;
	};
}

 

4、实例

如果页面姓名输入框要求满足不能为空、只能长度为3~4个汉字

//姓名检测
var nameNoNullTest = new NoNullCellTest("姓名","userVo.string(name)");
var nameLengthTest = new LengthCellTest("姓名","userVo.string(name)",2,8);
var nameChineseTest = new ChineseCellTest("姓名","userVo.string(name)");
var nameMainTest = new MainTest();
nameMainTest.addTest(nameNoNullTest).addTest(nameLengthTest).addTest(nameChineseTest);

//姓名检测
function nameTest(){
	nameMainTest.test();
}

  

分享到:
评论
1 楼 wangmuchang 2012-11-11  
 

相关推荐

    javascript验证方法,自己写的, 都是经常用的,欢迎下载

    JavaScript验证主要分为客户端验证和服务器端验证。客户端验证通常通过JavaScript在用户提交表单前进行,可以实时反馈错误信息,减少不必要的服务器请求,提高响应速度。而服务器端验证则是为了防止恶意用户绕过...

    javascript验证框架

    JavaScript验证框架是Web开发中不可或缺的一部分,主要用于在客户端进行数据验证,提高用户体验并减轻服务器端的压力。这些框架允许开发者创建自定义验证规则,确保用户输入的数据符合预设的格式和条件,例如邮箱...

    一个简单的带有javascript验证的注册页面

    本项目是一个关于“一个简单的带有javascript验证的注册页面”,主要关注的是前端验证技术,利用JavaScript语言来确保用户输入的数据符合特定的要求,提高用户体验并减轻服务器端的压力。 JavaScript是一种在客户端...

    JavaScript验证用户登录

    JavaScript验证用户登录 JavaScript验证用户登录 JavaScript验证用户登录

    javascript验证表单大全

    "JavaScript验证表单大全"这个主题涵盖了许多关于如何使用JavaScript有效地验证用户输入表单数据的知识。在Web应用程序中,表单验证对于确保用户提交的数据符合预期格式和规则至关重要,从而避免无效数据的提交,...

    气泡javascript验证框架

    "气泡javascript验证框架"是一个专注于用户体验的验证解决方案,它通过修改`validate.js`库,将原本的验证提示改为了气泡样式,使得用户交互更加直观且友好。 `validate.js`是一个轻量级的JavaScript表单验证框架,...

    JavaScript验证机制输入的测试工程

    JavaScript验证机制是Web开发中不可或缺的一部分,主要用于在用户提交数据前检查输入的有效性和格式。它大大提升了用户体验,减少了服务器端的负担,因为错误的输入可以在前端就得到及时纠正。在这个"JavaScript验证...

    常用javascript验证功能

    在网页表单处理中,JavaScript验证功能扮演着重要角色,它可以在数据提交到服务器之前对用户输入进行检查,确保数据的有效性和安全性。下面我们将深入探讨"常用javascript验证功能",包括取keycode大全、日期格式化...

    javascript 验证

    JavaScript验证是前端开发中的核心部分,它主要用于在用户提交数据之前检查输入的有效性,从而确保数据的准确性和安全性。在Web应用中,JavaScript验证通常在客户端进行,这可以提供即时反馈,减少不必要的服务器...

    Javascript验证

    JavaScript验证是Web开发中不可或缺的一环,主要用于前端数据的校验,确保用户输入的数据符合预设的规则,减少无效或错误的数据提交到服务器,从而提高用户体验和系统稳定性。本插件模仿了jQuery库的一些功能,提供...

    javascript特效 表单验证

    二、JavaScript验证基本原理 JavaScript可以通过监听表单元素的事件(如onsubmit、onchange等)来执行验证逻辑。当用户填写或修改表单字段时,对应的验证函数会被调用,检查输入内容是否符合预设规则。 三、...

    js javaScript 验证校验小工具包

    这个"js javaScript 验证校验小工具包"显然是一个集合了各种JavaScript验证和校验功能的资源库,旨在帮助开发者更方便地处理表单验证、数据格式检查等常见任务。 在前端开发中,验证和校验通常涉及以下几个方面: ...

    JavaScript 验证非法字符输入

    以上就是关于"JavaScript验证非法字符输入"的相关知识点,包括使用正则表达式进行验证、前端与后端的配合、以及无刷新效果的实现。理解并熟练运用这些技巧,能帮助开发者创建更加安全、用户体验良好的Web应用程序。

    html的checkbox的javascript验证

    本文将深入探讨HTML checkbox的JavaScript验证。 一、HTML checkbox基本结构 HTML中的checkbox通过`&lt;input&gt;`标签创建,type属性设置为"checkbox"。例如: ```html &lt;label for="option1"&gt;Option 1 ``` 二、...

    常用的JavaScript验证正则表达式.txt

    ### 常用的JavaScript验证正则表达式详解 #### 一、概述 在Web开发过程中,表单验证是确保用户输入数据准确性的重要环节之一。正则表达式因其强大的匹配能力而成为进行这类验证的首选工具。本文将详细介绍一系列...

    日期的javascript验证

    在这个场景中,标题提到的"日期的JavaScript验证"指的是利用JavaScript的内置Date对象及相关方法来实现对日期的验证。描述中提到了验证日期是否为今天、周六、周日或节假日,这涉及到对日期属性的读取以及对一周中的...

    表单的各种javascript验证 实例

    本教程将详细探讨表单的各种JavaScript验证实例,帮助开发者掌握这一核心技术。 一、基础知识 1. HTML表单元素:HTML中的`&lt;form&gt;`、`&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;select&gt;`等元素构成表单,用于用户输入和提交数据。...

Global site tag (gtag.js) - Google Analytics