`
vivian831015
  • 浏览: 1388 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

【转】js通用表单验证函数

阅读更多
转自:http://www.ccvita.com/60.html
Check.js JS函数文件:
//主函数
function CheckForm(oForm)
{
    var els = oForm.elements;
    //遍历所有表元素
    for(var i=0;i<els .length;i++)
    {
        //是否需要验证
        if(els[i].check)
        {
            //取得验证的正则字符串
            var sReg = els[i].check;
            //取得表单的值,用通用取值函数
            var sVal = GetValue(els[i]);
            //字符串->正则表达式,不区分大小写
            var reg = new RegExp(sReg,"i");
            if(!reg.test(sVal))
            {
                //验证不通过,弹出提示warning
                alert(els[i].warning);
                //该表单元素取得焦点,用通用返回函数
                GoBack(els[i]) 
                return false;
            }
        }
    }
}

//通用取值函数分三类进行取值
//文本输入框,直接取值el.value
//单多选,遍历所有选项取得被选中的个数返回结果"00"表示选中两个
//单多下拉菜单,遍历所有选项取得被选中的个数返回结果"0"表示选中一个
function GetValue(el)
{
    //取得表单元素的类型
    var sType = el.type;
    switch(sType)
    {
        case "text":
        case "hidden":
        case "password":
        case "file":
        case "textarea": return el.value;
        case "checkbox":
        case "radio": return GetValueChoose(el);
        case "select-one":
        case "select-multiple": return GetValueSel(el);
    }
    //取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
    function GetValueChoose(el)
    {
        var sValue = "";
        //取得第一个元素的name,搜索这个元素组
        var tmpels = document.getElementsByName(el.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();
        case "checkbox":
        case "radio": var els = document.getElementsByName(el.name);els[0].focus();
        case "select-one":
        case "select-multiple":el.focus();
    }
}
demo.htm 演示文件:<script language="JavaScript" src="Check.js"></script>
通用表单函数测试:
<form name="form1" onsubmit="return CheckForm(this)">
test:<input type="text" name="test"/>不验证<br />
账号:<input type="text" check="^\S+$" warning="账号不能为空,且不能含有空格" name="id"/>不能为空<br />
密码:<input type="password" check="\S{6,}" warning="密码六位以上" name="id"/>六位以上<br />
电话:<input type="text" check="^\d+$" warning="电话号码含有非法字符" name="number" value=""/><br />
相片上传:<input type="file" check="(.*)(\.jpg|\.bmp)$" warning="相片应该为JPG,BMP格式的" name="pic" value="1"/><br />
出生日期:<input type="text" check="^\d{4}\-\d{1,2}-\d{1,2}$" warning="日期格式2004-08-10"  name="dt" value=""/>日期格式2004-08-10<br />
省份:
<select name="sel" check="^0$" warning="请选择所在省份">
<option value="">请选择
</option><option value="1">福建省
</option><option value="2">湖北省
</option></select>
<br />
选择你喜欢的运动:<br />
游泳<input type="checkbox" name="c" check="^0{2,}$" warning="请选择2项或以上"/>
篮球<input type="checkbox" name="c"/>
足球<input type="checkbox" name="c"/>
排球<input type="checkbox" name="c"/>
<br />
你的学历:
大学<input type="radio" name="r" check="^0$" warning="请选择一项学历"/>
中学<input type="radio" name="r"/>
小学<input type="radio" name="r"/>
<br />
个人介绍:
<textarea name="txts" check="^[\s|\S]{20,}$" warning="个人介绍不能为空,且不少于20字"></textarea>20个字以上
<input type="submit"/>
</form>
分享到:
评论

相关推荐

    JS通用表单验证函数1

    "JS通用表单验证函数1"是一个针对这一需求的解决方案,它提供了一种灵活且可复用的方法来验证不同类型的表单字段。 该资源可能包含一个或多个JavaScript函数,用于验证不同类型的数据,如数字、电子邮件、电话号码...

    完美JavaScript通用表单验证函数

    .net2005完美JavaScript通用表单验证函数,只需要包含此文件就可以实现验证功能.

    JS通用表单验证函数

    【JS通用表单验证函数】是前端开发中用于确保用户输入数据有效性和合规性的一种常见技术。在网页表单提交前,使用JavaScript进行验证可以提高用户体验,减少无效数据提交到服务器,同时减轻后端处理压力。 这个特定...

    js通用表单验证代码

    总的来说,JavaScript通用表单验证涉及到对用户输入的捕获、验证逻辑的编写和错误处理的展示。通过合理地组织和复用验证代码,可以创建出高效且易于维护的表单验证系统。开发者应根据实际需求和项目规模,选择合适的...

    通用的JS表单验证

    "通用的JS表单验证"这个主题聚焦于如何利用JavaScript来确保用户在网页表单中输入的数据符合预设的规则,从而提高数据质量和用户体验。下面我们将深入探讨这个话题。 首先,表单验证是网页开发中的关键部分,它能...

    万能通用智能JS表单验证

    本主题聚焦于“万能通用智能JS表单验证”,这是一种利用JavaScript实现的高效、灵活的表单验证技术。表单验证是用户交互过程中的关键环节,它能够确保用户输入的数据符合预设的规则,从而减少服务器端的压力,提升...

    最新实用的Validate通用表单验证Jquery插件

    【最新实用的Validate通用表单验证Jquery插件】是一个高效、灵活的前端验证工具,专为使用Jquery框架的Web开发人员设计。这个插件极大地简化了表单验证的过程,使得用户输入的数据在提交前就能得到有效的检查,从而...

    js form 验证通用函数

    js form 验证通用函数 例子 onsubmit="checkField(this)" 请选择问卷题目!" name="field0"&gt; &lt;span id="field0Msg" style="color:red"&gt;&lt;/span&gt;

    validator 通用JS表单验证类

    `validator`是一个通用的JavaScript表单验证类,它在网页开发中扮演着重要的角色,确保用户输入的数据符合预设的规则和格式。JavaScript和XML的结合使得`validator`类能够灵活地处理各种验证需求,同时提供了易于...

    使用JavaScript语言进行表单验证

    ### 使用JavaScript语言进行表单验证 #### JavaScript与表单验证的重要性 随着互联网技术的飞速发展,表单作为用户向服务器提交数据的主要方式之一,在现代Web应用中扮演着至关重要的角色。为了确保提交的数据准确...

    Web通用的表单校验JS

    总之,"Web通用的表单校验JS"如LiveValidation中文修改版,提供了方便、灵活的客户端表单验证解决方案,简化了开发流程,提高了应用的质量和用户体验。无论你是新手还是经验丰富的开发者,掌握这样的工具都能极大地...

    js表单验证控制代码大全

    可以编写一个通用的验证函数,对输入进行多种规则的检查,确保输入符合所有要求。 这些验证方法通常结合HTML的`onsubmit`、`onkeyup`、`onchange`等事件来触发,以实时或提交时验证用户输入。同时,为了提供良好的...

    完美表单验证js,几乎包括了所有的表单要提交的验证

    本资源提供的"完美表单验证js"就是一个全面的JavaScript解决方案,几乎涵盖了所有常见的表单验证需求,如电话、QQ、Email等。 JavaScript是一种客户端脚本语言,它可以直接在用户的浏览器上运行,无需服务器参与,...

    jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮

    《jQuery带Tips动画提示通用表单验证插件详解》 在网页开发中,表单验证是必不可少的一个环节,它能够确保用户输入的数据符合预设的规则,提高用户体验并减少服务器端的压力。jQuery Validate插件正是这样一个强大...

    一个高效通用而又简单易用的客户端表单输入验证类库函数

    在Web开发中,表单验证是一项至关重要的任务,它确保用户提交的数据符合预期的格式和标准,从而提高数据质量和安全性。本项目提供了一个高效、通用且简单易用的客户端表单输入验证类库函数,专注于JavaScript和正则...

    validate 通用Ajax无刷新表单验证类

    "validate 通用Ajax无刷新表单验证类"就是针对这一需求设计的,旨在提供一个高效、便捷的解决方案,使得在用户填写表单时能够实时进行数据验证,无需等待页面刷新,极大地提高了用户体验。 Ajax(Asynchronous ...

    javascript万用表单验证

    "万用表单验证"是一个关于如何使用JavaScript进行高效、灵活的表单验证的技术主题。 首先,我们要理解表单验证的基本概念。在HTML中,`&lt;form&gt;`元素用于创建表单,用户可以在其中输入数据。`&lt;input&gt;`、`&lt;textarea&gt;`...

    Js 通用验证代码,实用的。

    而"checkone.js"则很可能是包含验证函数的JavaScript文件,它可能已经封装好了各种验证规则和方法。 在实际应用中,通用JavaScript验证代码可能包含以下关键知识点: 1. **正则表达式验证**:通过使用正则表达式...

    jQ表单万能验证插件 vf-validate.js

    JQ表单验证插件 使用方法:$.formValidate(options); version:1.6.0 @param {Object} options @param options.area 验证的区域父级元素,默认 body @param options.msg_type 错误提示类型:alert&#40;自定义函数...

Global site tag (gtag.js) - Google Analytics