表单操作集合类.

/**
 * @class FormOperation 表单操作方法集合类
 * @constructor
 */
function FormOperation(){
    var TIP_CLASS_NAME = "tip-messages"; //消息显示框类
    var TIP_SHOW_TIME = 5000; //消息框显示时间
    /**
     * 检测必须字段
     * @param{String} className 类名
     * @param{Boolean} showTip 是否显示提示框,默认true
     * @returns {boolean} 检测通过返回true,未通过返回false
     */
    this.requiredField = function(className,showTip){
        var rf,rfCur;
        if(showTip===undefined)showTip = true;
        if($("."+className).length<1)return true;
        rf=$("."+className);
        for(var i=0;i<rf.length;i++){
            rfCur = $(rf[i]);
            if($.trim(rfCur.val())==""||$.trim(rfCur.val())==rfCur.attr("placeholder")){
                if(showTip){
                    this.showTip(rfCur,TIP_CLASS_NAME,false,0);
                }
                rfCur.focus();
                return false;
            }
        }
        return true;
    }
    /**
     * 比较字段值
     * @param{String} className 类名
     * @param{Boolean} showTip 是否显示提示框,默认true
     * @returns {boolean} 比较未通过返回false,比较通过返回true
     */
    this.compareField = function(className,showTip){
        var cf,cfCur,curVal;
        if(showTip===undefined)showTip = true;
        if($("."+className).length<1)return true;
        cf=$("."+className);
        for(var i= 0,len = cf.length;i<len;i++){
            cfCur = $(cf[i]);
            if((i===0)&&(curVal=cfCur.val()));
            if(curVal!==cfCur.val()){
                if(showTip){
                    this.showTip(cfCur,TIP_CLASS_NAME,false,1);
                }
                cfCur.focus();
                return false;
            }
        }
        return true;
    }
    /**
     * 特殊字段检测
     * @param{String} className 类名
     * @param{String} specialType 特殊字段类型,当前可选类型有:email/邮箱
     * @param{Boolean} showTip 是否显示提示框,默认true
     * @returns {boolean} 通过,返回true,不通过,返回false
     */
     this.specialField = function(className,specialType,showTip){
        var sf,sfVal,reg;
        if(showTip===undefined)showTip = true;
        if($("."+className).length<1)return true;
        sf=$("."+className);
        sfVal = $.trim(sf.val());
        if(specialType=="email"){
            reg=/^\w+((-\w+)|(\.\w+))*\@{1}\w+\.{1}\w{2,4}(\.{0,1}\w{2}){0,1}/ig;
            if(sfVal.search(reg)===-1) {
                if(showTip){
                    this.showTip(sf,TIP_CLASS_NAME,false,1);
                }
                sf.focus();
                return false;
            }
        }
        return true;
    }
    /**
     * 范围字段匹配
     * @param{String} className 类名
     * @param{String} specialType 特殊字段类型,当前可选类型有:email/邮箱
     * @param{Boolean} showTip 是否显示提示框,默认true
     * @returns {boolean} 通过,返回true,不通过,返回false
     */
    this.scopeField = function(className,showTip,minNumber,maxNumber){
        var sf,sfVal;
        if(showTip===undefined)showTip = true;
        if($("."+className).length<1)return true;
        sf=$("."+className);
        if(minNumber===undefined)minNumber=0;
        if(maxNumber===undefined)maxNumber=1000000000000;
        sfVal = $.trim(sf.val());
        if(minNumber<=sfVal.length&&sfVal.length<=maxNumber)
        {
            return true;
        }else{
            if(showTip){
                this.showTip(sf,TIP_CLASS_NAME,false,1);
            }
            sf.focus();
            return false;
        }
    }
    /**
     * 生成提示框
     * @param{Object} obj 待显示提示框元素对象
     * @param{String} tipClassName 提示框类名
     * @param{Boolean} autoHide 是否自动隐藏,默认true
     * @param{Number} msgType 消息类型,1/特殊消息|2/其它消息,默认1
     * @returns {*|jQuery|HTMLElement} 不自动显示时,返回提示框对象
     */
    this.showTip = function(obj,tipClassName,autoHide,msgType){
        var pY,pX,oW,msg,msgIndex;
        if((autoHide===undefined)&&(autoHide = true));
        if(obj){
            pY = obj.position().top;
            pX = obj.position().left;
            oW = obj.outerWidth();
//            alert(pY+" "+pX);
            $("."+tipClassName).text(this.getTipMsg(obj,"formData",msgType)).css({top:pY+4+"px",left:pX+oW+"px"}).show();
            if(autoHide){
                setTimeout(function(){
                    $("."+tipClassName).hide();
                },TIP_SHOW_TIME);
            }else{
                return $("."+tipClassName);
            }
        }
    }
    /**
     * 提取消息
     * @param{Object} obj 将要提取消息元素
     * @param{String} objAttr 消息来源属性名,默认formData
     * @param{Number} msgType 消息类别 0/常规消息|1/特殊消息 默认0
     * @returns {string|*} 目标消息
     */
    this.getTipMsg = function(obj,objAttr,msgType){
        var msg,msgLength,msgIndex;
        if(obj===undefined)return;
        if(objAttr===undefined)objAttr = "formData";
        if(msgType===undefined)msgType = 0;
        msg = $.trim($(obj).attr(objAttr));
        msgIndex = msgLength = msg.length;
        if((msg.indexOf("&")!==-1)&&(msgIndex=msg.indexOf("&")));
        switch (msgType){
            case 0: msg = msg.substr(0,msgIndex);break;
            case 1: msg = msg.substr(msgIndex+1,msgLength);break;
        }
        return msg;
    }
    /**
     * 文本框文字回显(仅作用于不支持“placeholder”属性浏览器)
     * @param{String} className 文本框类名
     * @param{String} replaceColorClassName 文字颜色替换类名
     */
    this.echo = function(className,replaceColorClassName){
        var echoObj,echoText,echoCur;
        if (!(‘placeholder‘ in document.createElement(‘input‘))){
            if(!(echoObj = $("."+className))) return;
            $.each(echoObj,function(i,obj){
                $(obj).val($(obj).attr("placeholder")).addClass(replaceColorClassName);
            });
            echoObj.focus(function(){
                echoCur = $(this);
                echoText = echoCur.removeClass(replaceColorClassName).attr("placeholder");
                if($.trim(echoCur.val())==echoText&&echoCur.val(""));
            }).focusout(function(){
                if(($.trim(echoCur.val())==""||$.trim(echoCur.val())==echoText)&&echoCur.val(echoText).addClass(replaceColorClassName));
            });
        }
    }

}

  

表单操作集合类.

时间: 2024-08-10 11:47:51

表单操作集合类.的相关文章

表单操作-复选框

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单操作-复选框</title> <style> *{margin:0; padding: 0;} li{list-style: none;} .clearfix:before,.clearfix:after{display: table; co

selenium多表单操作与多窗口,以及警告框处理

知识是需要经常温习的,不然是很容易遗忘的. 以前自己操作IFRAME,多窗口的时候,觉得很简单.半年没有操作自动化了,知识又还了回去. 写博客有一个好处,可以把自己记住的知识点记录下来,这样,以后自己来翻看的时候,可以很快的找到思路. 毕竟自己不是大神,所以还是多记录一下. 一,多表单切换: 例子: driver.switch_to.iframe(""if"") driver.find_element_by_css_selector("[name=kw].

HTML表单操作的记录

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="

Django使用表单操作数据库

前言 目标:实现Django通过表单的GET方式和POST方式提交数据,并添加到数据库 . OS:win10 x64 Django:1.11.8 Python: 3.6 本文完整示例:完整示例: 虽然使用的系统和软件没有什么影响,但还是交代一下. 二.实现思路 从用户角度考虑 访问一个url,返回填写表单页面: 在表单页面填写信息,并提交: 若提交成功,返回提交成功页面,并提供返回添加页面和图书列表跳转链接: 若提交失败,则返回操作失败页面,并提供跳转继续添加链接: 从开发者角度 用户请求一个u

如何为Servlet类配置url以及form表单动作元素的写法。

在进行JavaWeb开发,使用Servlet的过程中,遇到了不少的问题,在此特地做一个总结.按照一般开发的习惯:jsp文件统一部署到Webroot文件夹目录下,Servlet类统一部署在src文件夹下的一个Servlet包内.## 1.要配置url的地方1.首先在Servlet类里面也要配置url.2.a标签以及form表单的action元素那里需要找到对应的Servlet类.3.在进入Servlet类里面后离开也要寻找另一个界面.## 2.在Servlet类里面配置url格式如下: <serv

表格、表单操作

(一)表格操作 方法:tHead ==>表格头tBodies ==>表格正文(可以有多个)(在js中如果不写,自动会添加,易出错)tFoot ==>表格尾rows ==>行cells ==>列eg:oTab.tBodies[0].rows[1].cells[1].innHTML(获取表格的第一个正文的第二行第二列的内容)=oTab.children[0].children[1].children[1].innHTML (二)表单操作<form id='form1'>

jquery validate 表单验证插件

对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百

JavaScript之Ajax-6 Ajax的增强操作(jQuery对Ajax的支持、表单操作)

一.jQuery对Ajax的支持 load() - 作用: 将服务器返回的数据字节添加到符合要求的节点之上 - 用法: $obj.load(请求地址,请求参数) - 请求参数 - "username=tom&age=22" - {'username':'tom','age':22} - 有请求参数时,load方法发送POST请求,否则发送GET请求 get() - 作用: 发送GET类型的请求 - 用法: $.get(请求地址,请求参数,回调函数,服务器返回的数据类型) - 说

使用ajax提交form表单,包括ajax文件上传

前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的ajax $.ajax({ url:"${pageContext.request.contextPath}/public/testupload", type:"post", data:{username:username}, success:function(data){ w