自制简单表单验证relative与absolute定位-阿里云开发者社区

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

2017-11-27 962

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

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;
        }
    }