`
Javatar2199
  • 浏览: 4409 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

一个比较完善表单校验插件

阅读更多
(function($){
    $.fn.jStar.defaults = {
        validationAttr:      'vtype',       //需要校验的标识属性
        warnAttr:            'warnText',   //校验错误时提示的文本属性
        errorMsgs:           ''
    };
    $.fn.isValid=function(){
        var vFlds = findValidateFields($(this)),
            foucusFlag=0;
            options.errorMsgs='';
        var showErrorMsgsLengthFlag= 0,
            flag=0;//控制显示输入错误的提示信息条数
        $(vFlds).each(function(){
            var fldValidations=buildSingleFldVType(this);
            var errorMsg=buildErrorMsg(fldValidations,this);
            if(errorMsg&&3==showErrorMsgsLengthFlag&&0==flag){ //这个判断需要放在showErrorMsgsLengthFlag自增前面
                options.errorMsgs+='
  • ··· ···
  • ';
                    flag++;
                }
                if(errorMsg&&showErrorMsgsLengthFlag<3){
                    options.errorMsgs+=errorMsg;
                    showErrorMsgsLengthFlag++;
                }
            });
            //????光标定位????i still dont know how......
            var firstErrorMsg=options.errorMsgs.substring(0,options.errorMsgs.indexOf('<br/>'));
            if(firstErrorMsg){
                var obj = $('[warnText]',this);
                for(var i=0;i<obj.length;i++){
                    var errorMsg=$(obj[i]).attr('warnText');
                    if(firstErrorMsg==errorMsg){
    //                    showErrorMsgs();
                        obj[i].focus();
                        return false;
                    }
                }
            }

            if(options.errorMsgs.length>0)return false;
            else return true;
        };


        function buildErrorMsg(fldValidations, field) {
            var errorMsg = '';
            for(var i = 0; i < fldValidations.length; i++){
                var funcName = getVFunctionName(fldValidations[i]);
                var params = buildVParams(fldValidations[i]);
                if(!eval('$.fn.jStar.validations["'+funcName+'"](field, field.val()'+params+')')) {
                    errorMsg+='
  • '+$(field).attr(options.warnAttr)+'
  • ';
                }
            }
            return errorMsg;
        }
        //拿到需要校验元素的校验类型的参数。eg: range(1,100)
        function buildVParams(validation) {
            if(validation.indexOf('(') != -1) {
                var arr = validation.substring(validation.indexOf('(') + 1, validation.length - 1).split(',');
                var tempStr = '';


                for(var i = 0; i < arr.length; i++) {
                    var single = trim(arr[i]);
                    if(parseInt(single)) {
                        tempStr += ','+single;
                    } else {
                        tempStr += ',"'+single+'"'
                    }
                }


                return tempStr;
            } else {
                return '';
            }
        }


        //找到所有需要校验的元素
        function findValidateFields(form) {
            var tags = 'input textarea select'.split(' ');
            var fields = [];


            for(var i = 0; i < tags.length; i++) {
                form.find(tags[i]+'['+options.validationAttr+']').each(function() {
                    if($(this).attr(options.validationAttr)){//判断options.validationAttr是否为空
                        fields.push($(this));
                    }
                });
            }
            return fields;
        }
        //各元素需要校验的类型
        function buildSingleFldVType(field) {
            var valStr = field.attr(options.validationAttr);
            var fldValidations=[];
            var tempStr = '';
            var openBrackets = 0;
            for(var i = 0; i < valStr.length; i++) {
                switch(valStr[i]) {
                    case ',':
                        if(openBrackets) {
                            tempStr += ',';
                            openBrackets--;
                        } else {
                            fldValidations.push(trim(tempStr));
                            tempStr = '';
                        }
                        break;
                    case '(':
                        tempStr += '(';
                        openBrackets++;
                        break;
                    case ')':
                        tempStr += ')';
                        fldValidations.push(trim(tempStr));
                        tempStr='';
                        break;
                    default:
                        tempStr += valStr[i];
                }
                if(valStr.length-1==i&&')'!=valStr[i]){//判断最后一个字符是不是')',是则不执行下面一行代码
                    fldValidations.push(tempStr);
                }
            }
            return fldValidations;
        }


        function getVFunctionName(validation) {
            if(validation.indexOf('(') != -1) {
                return validation.substr(0, validation.indexOf('('));
            } else {
                return validation;
            }
        }
        //去掉前后导空格
        function trim(str) {
            return str.replace(/^\s+/, '').replace(/\s+$/, '');
        }
        var options={};
        options=$.fn.jStar.defaults;


    })(jQuery);
    0
    0
    分享到:
    评论

    相关推荐

      jQuery的form表单校验插件

      **jQuery的form表单校验插件** 在Web开发中,表单验证是必不可少的一环,它确保用户输入的数据符合预设的规则,避免无效数据的提交,提高用户体验。jQuery作为一个强大的JavaScript库,提供了丰富的功能,包括对DOM...

      jquery 表单校验的插件formValidator4.01

      在4.0.1版本中,该插件提供了一系列丰富的特性,使得开发者能够快速构建出功能完善、易于维护的表单验证机制。 **一、jQuery FormValidator核心特性** 1. **易用性**:jQuery FormValidator的API设计简洁明了,...

      jq 表单校验工具

      "jq 表单校验工具"是一个专门用于JavaScript(js)和jQuery(jq)环境的插件,它提供了强大的功能来帮助开发者实现对表单输入的实时验证。 首先,我们来看一下这个工具的核心功能。"传参"意味着你可以向校验方法...

      jquery表单验证插件

      **validform_v5.3_ncr_min.js** 是这个插件的压缩包内的核心脚本文件,版本号为5.3,"ncr"可能是“NoConflict”或者“Non Commercial Release”的缩写,意味着这可能是一个无冲突或非商业版本。"min"表示这是经过...

      jquery validate表单验证插件制作注册表单验证提交

      在这个“jquery validate表单验证插件制作注册表单验证提交”的主题中,我们将深入探讨如何使用这个插件来构建一个功能完善的注册表单。 首先,jQuery Validate 插件的核心在于它的简单易用性。在HTML中,你需要为...

      漂亮的表单验证效果

      - **无阻塞**:允许部分有效输入,不要因为一个错误阻止其他字段的输入。 - **人性化**:考虑用户可能的输入习惯,避免过于严格的验证规则。 6. **库与框架支持**: - jQuery Validation:jQuery的插件,提供...

      VUE3表单编辑器,vue3代码资源

      2. **Teleport**:Teleport是Vue3的一个新特性,它可以将组件的内容“传送”到文档中的任意位置,这对于处理如 modal、 toast 或表单等需要插入到特定DOM节点的场景非常有用。 3. **Suspense组件**:Vue3新增的...

      基于BootStrap与jQuery.validate实现表单提交校验功能

      其次,jQuery.validate 是一个强大的表单验证插件,它的作用是在用户提交表单之前,对用户填写的内容进行格式校验,确保数据的有效性和完整性。通过 jQuery.validate 可以很容易地定义各种校验规则,从而避免无效...

      使用vue自定义指令开发表单验证插件validate.js

      随着项目复杂度的增加,我们可能需要一个更为强大的表单验证插件来保证用户输入的数据符合预期。在本篇知识中,我们将探讨如何使用Vue的自定义指令来开发一个名为validate.js的表单验证插件。 首先,让我们来理解...

      Jquery 的表单验证控件

      在这个场景中,我们将深入探讨JQuery中的表单验证控件,尤其是`jQuery的表单校验插件validate`。 `jQuery Validate`插件是jQuery的一个官方扩展,用于实现客户端的表单验证。这个插件提供了丰富的选项和方法,使得...

      BootstrapValidator-0.5.3表单验证

      BootstrapValidator是基于Bootstrap框架的一个强大的表单验证插件,版本0.5.3提供了丰富的功能和自定义选项,使得在Web应用中实现高效且美观的表单验证变得简单易行。这个压缩包包含了该插件的js文件和css样式文件,...

      注册插件formvalidator4.1.1

      FormValidator是一款强大的前端验证插件,主要用于在网页表单提交前进行数据校验,确保用户输入的数据符合预设的规则,从而提高用户体验并减少服务器端的压力。这个插件版本为4.1.1,它在前一版本的基础上进行了优化...

      BOS插件开发

      通过上述内容,我们可以看到K/3Cloud BOS平台的插件开发不仅为用户提供了一个高度灵活和可扩展的框架,同时也极大地提升了系统的个性化定制能力。无论是对于企业内部的需求满足还是对外部市场的适应,插件开发都发挥...

      vue+elementUI实现表单和图片上传及验证功能示例

      代码通过实例化组件、传入props、监听事件等步骤组织,最终实现了一个界面友好、功能完善的表单提交功能。 ### 结论 通过本示例,开发者可以了解到如何在使用Vue.js和Element UI的项目中,实现表单的创建、验证和...

      jquery插件

      而 `jquery-validation` 是一个基于 jQuery 的表单验证插件,它为用户提供了强大的表单验证功能,帮助开发者实现客户端的名称、密码、邮箱等输入字段的格式校验。 **jQuery Validation 插件介绍** jQuery ...

      SSH框架做出一个完善的论坛

      5. **表单校验**:Struts2的拦截器可以实现前端数据的验证,如邮箱格式、用户名唯一性等,确保输入数据的有效性。 6. **文章管理**:后台可以对文章进行分类、置顶、删除等操作,这些功能需要服务层提供相应的接口...

      jquery默认校验规则整理

      jQuery还提供了一套强大的表单验证插件——Validation Plugin,用于在客户端进行表单数据校验,而不需要提交到服务器端。以下是对jQuery Validation Plugin默认校验规则的详细知识点整理: 1. required: true 这个...

      Validform表单验证总结篇

      ValidForm表单验证工具是一款用于前端页面实现表单验证功能的JavaScript插件,它提供了丰富的验证方法和灵活的配置选项,从而在用户提交表单之前对输入数据进行校验,确保数据的准确性和完整性。ValidForm可以应用在...

    Global site tag (gtag.js) - Google Analytics