自制简单表单验证relative与absolute定位-白红宇

html结构，用到了label与span

添加样式

.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()

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，如需转载请自行联系原作者