自制简单表单验证relative与absolute定位

简介:

html结构,用到了label与span

<label class="relative"><input type="text" name="name" id="name" class="colorblur" size="40" value="{sh:$info.name}"/><span class="msg_dialog"></span></label>

添加样式

复制代码
.relative{
    position: relative;
    font-weight: normal;

}
.msg_dialog{
    display: block;
    width:200px;
    height:auto;
    position: absolute;
    right:-200px;
    top:5px;
    color:red;
    overflow: hidden;
}
复制代码

表单添加checkForm()

<form action="{sh::U('User/addAgent')}" method="post" id="myform" onsubmit="return checkform();">
复制代码
function checkform(){
    if($("#name").val() == ''){
        showdialog($("#name"),"姓名不能为空");
        $("#name").focus();
        return false;
    }

    var email_val = $("#email").val();
    if(email_val == ''){
        showdialog($("#email"),"邮箱不能为空");
        $("#email").focus();
        return false;
    }
    reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    if(!reg.test(email_val)){
        showdialog($("#email"),"邮箱不合法");
        $("#email").focus();
        return false;
    }

    // ajax email是否已存在
    if(ajaxCheck('email',email_val) == 1){
        showdialog($("#email"),"邮箱已存在,请勿重复添加");
        $("#email").focus();
        return false;
    }

    var tel_val = $("#tel").val();
    if(tel_val == '' || tel_val.length != '11'){
        showdialog($("#tel"),"手机不能为空或手机号有误");
        $("#tel").focus();
        return false;
    }

    // ajax 验证号码是否已存在
    if(ajaxCheck('tel',tel_val) == 1){
        showdialog($("#tel"),"号码已存在");
        $("#tel").focus();
        return false;
    }


    var reg = /^[0-9a-zA-Z]+$/;
    if($("#password").val() == '' || $("#password").val().length <6 || !reg.test($("#password").val())){
        showdialog($("#password"),"密码不能为空且必须为字符或数字");
        $("#password").focus();
        return false;
    }

    if($("#map_lng").val() == ''){
        showdialog($("#map_lng"),"请标注代理商位置");
        return false;
    }
}
复制代码

showdialog() 方法负责处理提示信息

function showdialog(obj,msg){
    obj.siblings(".msg_dialog").text(msg).show().delay(2000).hide(0);
}

delay(2000).hide(0) 延迟两秒后消失
ajax验证

复制代码
// ajax验证邮箱号码
function ajaxCheck(t,v){
    var res = '';
    $.ajax({
        tpye:"post",
        url:"{sh::U('User/ajax','todo=checkVal')}",
        data:"t="+t+"&v="+v,
        async: false,
        success:function(data){
            res = data;
        }
    });
    return res;
}
复制代码
复制代码
public function ajax(){
        $todo = $this->_request('todo','trim');
        switch ($todo) {
            case 'checkVal':
                $t = $this->_request('t','trim');
                $v = $this->_request('v','trim');
                if(empty($t) || empty($v)){
                    exit('0');
                }
                $agentModel = M('Agent');
                if($t == 'email'){
                    $count_email = $agentModel->where(array('email'=>$v))->count();
                    if($count_email > 0){
                        exit('1');
                    }
                }

                if($t == 'tel'){
                    $count_tel = $agentModel->where(array('tel'=>$v))->count();
                    if($count_tel > 0){
                        exit('1');
                    }
                }
                break;
            
            default:
                # code...
                break;
        }
    }
复制代码

效果

两秒后红色提示将消失


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5009833.html,如需转载请自行联系原作者

相关文章
|
13天前
|
存储 弹性计算 人工智能
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
2025年9月24日,阿里云弹性计算团队多位产品、技术专家及服务器团队技术专家共同在【2025云栖大会】现场带来了《通用计算产品发布与行业实践》的专场论坛,本论坛聚焦弹性计算多款通用算力产品发布。同时,ECS云服务器安全能力、资源售卖模式、计算AI助手等用户体验关键环节也宣布升级,让用云更简单、更智能。海尔三翼鸟云服务负责人刘建锋先生作为特邀嘉宾,莅临现场分享了关于阿里云ECS g9i推动AIoT平台的场景落地实践。
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
|
5天前
|
云安全 人工智能 安全
Dify平台集成阿里云AI安全护栏,构建AI Runtime安全防线
阿里云 AI 安全护栏加入Dify平台,打造可信赖的 AI
|
12天前
|
人工智能 自然语言处理 自动驾驶
关于举办首届全国大学生“启真问智”人工智能模型&智能体大赛决赛的通知
关于举办首届全国大学生“启真问智”人工智能模型&智能体大赛决赛的通知
|
8天前
|
人工智能 运维 Java
Spring AI Alibaba Admin 开源!以数据为中心的 Agent 开发平台
Spring AI Alibaba Admin 正式发布!一站式实现 Prompt 管理、动态热更新、评测集构建、自动化评估与全链路可观测,助力企业高效构建可信赖的 AI Agent 应用。开源共建,现已上线!
780 23
|
7天前
|
人工智能 Java Nacos
基于 Spring AI Alibaba + Nacos 的分布式 Multi-Agent 构建指南
本文将针对 Spring AI Alibaba + Nacos 的分布式多智能体构建方案展开介绍,同时结合 Demo 说明快速开发方法与实际效果。
499 37
|
7天前
|
机器学习/深度学习 人工智能 搜索推荐
万字长文深度解析最新Deep Research技术:前沿架构、核心技术与未来展望
近期发生了什么自 2025 年 2 月 OpenAI 正式发布Deep Research以来,深度研究/深度搜索(Deep Research / Deep Search)正在成为信息检索与知识工作的全新范式:系统以多步推理驱动大规模联网检索、跨源证据。
492 41
|
2天前
|
文字识别 监控 物联网
这是我写的实施一地两检的跨境高铁站旅客资料预报系统的系统架构
本文设计了一套基于IAPIS理念的高铁跨境旅客预报与边检联动系统,覆盖青青草原内地与喜羊羊特别行政区间“一地两检”场景。系统在旅客购票后即采集证件、生物特征及行程信息,通过Advance Passenger Info Checker等模块,向出发地和目的地移民管理机构实时推送数据,实现出入境许可预审。支持线上/线下购票、检票、退票全流程管控,结合面部识别、行为追踪技术监控旅客状态,防止滞留或非法通行。列车发车前进行最终核验,确保所有跨境旅客获边检许可。若旅行被中途取消,系统自动改签、退票并通知各方,保障安全与效率。(239字)