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

效果

两秒后红色提示将消失

自制简单表单验证relative与absolute定位的更多相关文章

  1. JS简单表单验证

    这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...

  2. 如何利用jQuery进行简单表单验证

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...

  3. jq之简单表单验证

    <body> <form method="post" action=""> <div class="int"& ...

  4. 模仿 BootstrapValidator 自制 模块化 表单验证

    index.html : <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  5. 关于ajax用户名验证和jquery实现简单表单验证

    首先来说用户名验证: 前台: <tr> <td class="tableleft">教师编号</td> <td><input ...

  6. AJAX案例二:简单表单验证

    案例:如果用户名输入为张三,那么在失去焦点时后面会显示该用户名已被注册,否则显示可以注册! <%@ page language="java" import="jav ...

  7. JavaScrip——简单练习(输出方式,简单表单验证)

    <script> //输出方式 document.write(Date());//获取当前时间 document.write(1); document.write("<p& ...

  8. AngularJS的简单表单验证

    代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsCheckSimpleForm.rar 代码: <!DOCTYPE HTM ...

  9. 初学structs2,表单验证

    一.简单表单验证示例 structs.xml配置 <struts> <package name="validate" namespace="/valid ...

随机推荐

  1. 编译不通过:提示XXXX不是类或命名空间名 的解决办法

    手动写了一个类,需要引入预编译头stdafx.h.结果编译时提示XXXX不是类或命名空间名. 处理方法:将#include "stdafx.h"放在最前面.

  2. 查看登录用户who

    几个命令:wwho每隔5秒钟,就来查看hadoop是否已经登录,如登录,显示其已经登录,并退出:sleep whoami last,显示/var/log/wtmp文件,显示用户登录历史及系统重启历史  ...

  3. qt视图选择

    # -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' from PyQt4.Qt import * from PyQt4. ...

  4. IOS6和IOS7 显示一样的SearchBar

    if (isIOS7) { mySearchBar=[[UISearchBar alloc]initWithFrame:CGRectMake(, , , )]; mySearchBar.autocor ...

  5. Android软件开发之常用系统控件界面整理

    1.文本框TextView TextView的作用是用来显示一个文本框,下面我用两种方式为大家呈现TextView, 第一种是通过xml布局文件呈现 ,第二种是通过代码来呈现,由此可见Android ...

  6. 把一个select查询结果插入到一个表(可选指定字段和值实例)

    把一个select查询结果插入到一个表(可选指定字段和值实例) insert into  bak (cc,yf) select cc,9 from ket insert into bak (cc,yf ...

  7. .net 地址栏传中文乱码 的解决方法

    1.设置web.config文件. <system.web> ...... <globalization requestEncoding="gb2312" res ...

  8. ASP.NET中的Request和Respone对象的使用

            前台<body>中的表单代码: ASP.NET对象有如下几个: 本文从“asp.net中通过from表单submit提交到后台的实例”来谈谈Request和Response ...

  9. 关于Emit中动态类型TypeBuilder创建类标记的一点思考

      利用TypeBuilder是可以动态创建一个类型,现在有个需求,动态生成一个dll,创建类型EmployeeEx,需要继承原dll里面的Employee类,并包含Employee类上的所有类标记. ...

  10. IOS 实现QQ好友分组展开关闭功能

    贴出核心代码  主要讲一下思路. - (void)nameBtnClick:(myButton *)sender { //获取当前点击的分组对应的section self.clickIndex = s ...