`
shencanfeng
  • 浏览: 26033 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

封装较好的验证表单数据

阅读更多
/*****
    *****验证form表单的数据
*****
*****
********/
function CheckForm(oForm)
{
    var els = oForm.elements;
    //遍历所有表元素
//alert(els.length);
    for(var i=0;i<els.length;i++)
    {
//alert(els[i].getAttribute("check"));
        //是否需要验证
        if(els[i].getAttribute("check")!=""&&els[i].getAttribute("check")!="undefined"&&els[i].getAttribute("check")!=null)
        {
//alert("14"+els[i].getAttribute("check"));
            //取得验证的正则字符串
            var sReg = els[i].getAttribute("check");
//alert(sReg);
            //取得表单的值,用通用取值函数
            var sVal = GetValue(els[i]);
            //字符串->正则表达式,不区分大小写
            var reg = new RegExp(sReg,"i");
            if(!reg.test(sVal))
            {

                //验证不通过,弹出提示warning
                alert(els[i].getAttribute("warning"));
                //该表单元素取得焦点,用通用返回函数
                GoBack(els[i]); 
                return false;
            }
        }
    }
}
//通用取值函数分三类进行取值
//文本输入框,直接取值el.value
//单多选,遍历所有选项取得被选中的个数返回结果"00"表示选中两个
//单多下拉菜单,遍历所有选项取得被选中的个数返回结果"0"表示选中一个
function GetValue(el)
{
    //取得表单元素的类型
    var sType = el.type;
//alert(el.type);
    switch(sType)
    {
        case "text":
        case "hidden":
        case "password":
        case "file":
        case "textarea": return el.value;break;
        case "checkbox":
        case "radio": return GetValueChoose(el);break;
        case "select-one":
        case "select-multiple": return GetValueSel(el);break;
    }
    //取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
    function GetValueChoose(el)
    {
        var sValue = "";
        //取得第一个元素的name,搜索这个元素组
        var tmpels = document.getElementsByName(el.getAttribute("name"));
        for(var i=0;i<tmpels .length;i++)
        {
            if(tmpels[i].checked)
            {
                sValue += "0";
            }
        }
        return sValue;
    }
    //取得select的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
    function GetValueSel(el)
    {
        var sValue = "";
        for(var i=0;i<el.options.length;i++)
        {
            //单选下拉框提示选项设置为value=""
            if(el.options[i].selected && el.options[i].value!="")
            {
                sValue += "0";
            }
        }
        return sValue;
    }
}
//通用返回函数,验证没通过返回的效果.分三类进行取值
//文本输入框,光标定位在文本输入框的末尾
//单多选,第一选项取得焦点
//单多下拉菜单,取得焦点
function GoBack(el)
{
    //取得表单元素的类型
    var sType = el.type;
    switch(sType)
    {
        case "text":
        case "hidden":
        case "password":
        case "file":
        case "textarea": el.focus();var rng = el.createTextRange(); rng.collapse(false); rng.select();break;
        case "checkbox":
        case "radio": var els = document.getElementsByName(el.getAttribute("name"));els[0].focus();break;
        case "select-one":
        case "select-multiple":el.focus();break;
    }
}
分享到:
评论

相关推荐

    表单提交源码

    在提交表单后,服务器端需要接收并处理这些数据。在PHP中,可以使用 `$_POST` 超全局数组来访问这些通过POST提交的变量。例如,如果表单有一个名为 "username" 的字段,那么在PHP中可以通过以下方式获取其值: ```...

    AJAX提交表单数据实例分析

    AJAX(Asynchronous JavaScript and XML)是一...通过对AJAX提交表单数据的方法的分析,以及实例的详细解读,我们可以更好地理解这一技术的核心概念和实现细节,进而在实际开发中有效应用,提升应用的性能和用户体验。

    HTTP上传和下载C++封装类支持GET、POST多种方式

    POST方法则将数据放在请求体中,可以传输大量数据,如表单提交、文件上传等。 在C++中实现HTTP请求,通常需要创建一个HTTP连接类,比如`HttpConnection`,它封装了发送请求、接收响应的过程。`HttpConnection.cpp`...

    uniapp-脚手架(uview2.0+请求封装+vuex)

    封装后的请求模块可以设置全局的请求头、默认参数,还可以添加拦截器来处理请求前后的逻辑,如添加loading、验证token等。 **Vuex** 是Vue.js的状态管理模式,用于管理组件之间的共享状态。在uni-app中使用Vuex,...

    表单练习与知识点.7z

    4. `&lt;button&gt;`:创建按钮,可以是提交表单的submit类型,也可以是重置表单的reset类型,或者自定义操作的button类型。 接着,表单的交互性是通过JavaScript来增强的。例如,我们可以使用事件监听器(如onChange、...

    j2ee 表单学习

    - **`action`**:提交表单时的数据发送地址。 - **`method`**:提交表单的方式,常见的有GET和POST两种方式。 表单的基本结构如下所示: ```html 表单ID" name="表单名称" action="提交地址" method="提交方式...

    Android实战——okhttp3的使用和封装

    本文将深入探讨OkHttp3的使用和封装,旨在帮助开发者更好地理解和掌握这一强大的网络请求工具。 首先,让我们了解OkHttp的基本概念。OkHttp是由Square公司开发的,它提供了一个高效的HTTP客户端接口,具有缓存、...

    js正则表达式验证表单【完整版】

    最后,文章指出,使用JavaScript和正则表达式进行表单验证具有较好的参考价值,并鼓励大家学习和应用。同时,文章还感谢了读者的支持。 整篇文章通过具体的实例,展示了前端开发中表单验证的完整流程。不仅提供了...

    易语言post提交模块源码

    在本资源中,"易语言post提交模块源码" 提供了一种实现HTTP POST请求的方法,这对于网络编程,特别是涉及到数据提交、网页表单处理或者API接口调用的应用开发非常重要。 POST提交是HTTP协议中的一个基本方法,用于...

    使用ajax异步提交表单的几种方法总结

    这种方法适用于表单字段较少且不复杂的情况,但当表单字段多时,手工收集和封装数据可能会变得繁琐且容易出错。 **方式二:使用jQuery的`serialize()`方法** `serialize()`方法可以自动遍历表单内的所有元素,将...

    IOS应用源码Demo-个人信息输入表(支持表单增删)-毕设学习.zip

    3. **表单验证**:在用户提交表单前,应用通常需要对输入进行验证,确保数据的完整性和正确性。例如,邮箱地址的格式检查、电话号码的格式验证等。这个源码可能包含了这些验证逻辑,你可以通过查看代码来学习如何...

    冒泡排序-13-表单标签和标签元素标签.ev4.rar

    结合冒泡排序和表单标签,我们可以想象一个教学场景:一个网页教程可能包含一个交互式的冒泡排序演示,用户可以通过输入一组数字,然后通过表单提交,网页后端接收到数据后用冒泡排序算法对这些数字进行排序,并将...

    纯js封装的ajax功能函数与用法示例

    用户触发的事件(比如点击按钮)会调用封装好的AJAX函数,实现与服务器的数据交互,并根据返回结果执行相应的操作。 总的来说,通过上述介绍,我们可以看到利用纯JavaScript封装AJAX功能函数不仅可以实现与服务器端...

    自己实现ajax封装示例分享

    * 实现实时验证:使用 Ajax 可以实现在表单提交前进行实时验证。 * 实现动态加载数据:使用 Ajax 可以实现在不刷新页面的情况下加载数据。 Ajax 的优缺点 ------------- Ajax 的优点我们已经提到过,下面是 Ajax ...

    国外Java Script经典封装(包含所有源代码)

    1. **函数库和组件**:这个压缩包中包含了多个JavaScript的函数库和组件,它们可能包括动画效果、事件处理、DOM操作、Ajax通信、表单验证、日期时间处理、图形绘制等多个方面的功能。这些封装好的代码模块可以帮助...

    asp.net页面状态保存源码以及示例

    当用户提交表单时,这个字符串会被发送回服务器,然后ASP.NET框架会反序列化这些数据,恢复页面的状态。然而,ViewState也增加了页面的大小,因此在处理大量数据或对性能有严格要求的场景下需要谨慎使用。 表单内容...

    Servlet+json+js(jquery)+jsp实现分页

    在Web开发中,分页是一种常见的数据展示方式,特别是在处理大量数据时,它能提高用户体验,使得用户可以逐步浏览信息,而不会一次性加载...同时,这种技术方案也具有较好的可扩展性,可以适应不同的数据源和应用场景。

    Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例

    这一特性对于创建动态表单、验证和实时数据更新非常有用。 **Angular指令封装** 在Angular中,指令(Directives)是一个核心概念,允许开发者封装可重用的HTML标记行为。通过创建指令,开发人员可以向DOM元素添加...

    Python+seleunim+ddt+unittest自动化数据驱动心得

    通过数据驱动测试,我们可以以较少的代码覆盖更多的测试场景,同时保持测试代码的整洁和可读性。对于有代码阅读能力的开发者来说,理解和维护这样的测试代码会相对容易。不过,对于初学者而言,理解并熟练运用这些...

Global site tag (gtag.js) - Google Analytics