js form表单 鼠标移入弹出提示功能
JS 部分
/*
Copyright (C) 2009 - 2012
Email: wangking717@qq.com
WebSite: Http://wangking717.javaeye.com/
Author: wangking
*/
$(function(){
var xOffset = -20; // x distance from mouse
var yOffset = 20; // y distance from mouse
//input tips
$("input[tip],textarea[tip],select[tip]").hover(
function(e) {
var offset = $(this).offset();
var tip = $(this).attr("tip");
/*var top = (offset.top + yOffset);
var left = (offset.left + xOffset);*/
var top = (e.pageY + yOffset);
var left = (e.pageX + xOffset);
$('body').append( '<p id="vtip"><img id="vtipArrow" src="data:images/vtip_arrow.png"/>' + tip + '</p>' );
$('p#vtip').css("top", top+"px").css("left", left+"px");
},
function() {
$("p#vtip").remove();
}
).mousemove(
function(e) {
var top = (e.pageY + yOffset);
var left = (e.pageX + xOffset);
$("p#vtip").css("top", top+"px").css("left", left+"px");
}
);
$("input[tip],textarea[tip],select[tip").blur(function(){
validate($(this),"input");
});
$("select[reg]").blur(function(){
validate($(this),"select");
});
$("form").submit(function(){
var isSubmit = true;
$("input[reg],textarea[reg]").each(function(){
if(!validate($(this),"input")){
isSubmit = false;
}
});
$("select[reg]").each(function(){
if(!validate($(this),"select")){
isSubmit = false;
}
});
return isSubmit;
});
});
function validate(obj,tagType){
var reg = new RegExp(obj.attr("reg"));
var objValue = obj.attr("value");
if(!reg.test(objValue)){
if(tagType == "input"){
obj.addClass("input_validation-failed");
}else{
obj.addClass("select_validation-failed");
}
return false;
}else{
if(tagType == "input"){
obj.removeClass("input_validation-failed");
}else{
obj.removeClass("select_validation-failed");
}
return true;
}
}
HTML 部分
<div class="instanceList position-re">
<div class="instanceList-sec1 claroDiff1">
<div class="instanceList-sec10">
<p class="ins-sec10-p1"><span>|</span>第一步:填写基本信息 >> 第二步:填写主体信息 >> 第三步:填写网站信息 >> 第四步:提交并等待审核</p>
</div>
<div class="instanceList-sec10">
<p class="ins-sec10-p1"><span>|</span>网站域名信息</p>
</div>
<div class="instanceList-sec10">
<div class="wrapper15">
<div class="width15 float-left text-right"><label class="label_small">域名:</label></div>
<div class="width85 float-left text-left"><input type="text" id="Ym" class="input_long Ym"\><em>*</em><span class="attention">填写域名的标准形式,如123.com</span></div>
<div class="clear"></div>
<!-- <div class="width15 float-left text-right"><label class="label_small">接入标识:</label></div>
<div class="width85 float-left text-left Jrbs">
<em style="left: -1px;"></em>
</div> -->
<div class="clear"></div>
</div>
</div>
</div>
<div class="instanceList-sec1 claroDiff1">
<div class="instanceList-sec10">
<p class="ins-sec10-p1"><span>|</span>备案主体基本信息</p>
</div>
<div class="instanceList-sec10">
<div class="wrapper15">
<div class="width15 float-left text-right"><label class="label_small">接入方式:</label></div>
<div class="width85 float-left text-left">
<select id="Jrfs" class="Jrfs">
<option value="">请选择</option>
</select>
<em style="left: -1px;">*</em></div>
<div class="clear"></div>
<div class="width15 float-left text-right"><label class="label_small">分布地点:</label></div>
<div class="width85 float-left text-left">
<select id="Fbdd" class="Fbdd">
<option value="">请选择</option>
</select>
<em style="left: -1px;">*</em><span class="attention"></span></div>
<div class="clear"></div>
<div class="width15 float-left text-right"><label class="label_small">主办单位性质:</label></div>
<div class="width85 float-left text-left">
<select id="Dwxz" class="Dwxz" tip="北京、天津、上海、广东、浙江地区为企业性质的主办单位,只能通过“工商营业执照”备案;<br>内蒙古管局要求:主办单位证件必须是本省的有效证件;<br>北京管局要求:个人主体用户,请用中国公民身份证进行备案;<br>学校或律师事务所请根据证件上的机构类型进行选择,如:社会团体或事业单位,且只能通过“组织机构代码证书”备案">
<option value ="0" class="text-left">请选择</option>
</select>
<em style="left: -1px;">*</em>
</div>
<div class="clear"></div>
<div class="width15 float-left text-right"><label class="label_small">主办单位有效证件类型:</label></div>
<div class="width85 float-left text-left">
<select id="Zjlx" class="Zjlx">
<option value ="0" class="text-left">请选择</option>
</select>
<em style="left: -1px;">*</em>
</div>
<div class="clear"></div>
<div class="width15 float-left text-right"><label class="label_small">主办单位有效证件号码:</label></div>
<div class="width85 float-left text-left"><input type="text" id="Zjhm" class="input_primary Zjhm"\><em>*</em><span class="btips">输入有误,请检查!</span></div>
<div class="clear"></div>
<div class="width15 float-left text-right"><label class="label_small">IP类型:</label></div>
<div class="width85 float-left text-left">
<select id="Iplx" class="Iplx">
<option value="">请选择</option>
<option value="0">Ipv4</option>
<option value="1">Ipv6</option>
</select>
<em style="left: -1px;"></em></div>
<div class="clear"></div>
<div class="width15 float-left text-right"><label class="label_small">起始IP:</label></div>
<div class="width85 float-left text-left"><input type="text" id="Qsip" class="input_primary Qsip"\><em>*</em><span class="btips">输入有误,请检查!</span></div>
<div class="clear"></div>
<div class="width15 float-left text-right"><label class="label_small">终止IP:</label></div>
<div class="width85 float-left text-left"><input type="text" id="Zzip" class="input_primary Zzip"\><em>*</em><span class="btips">输入有误,请检查!</span></div>
<div class="clear"></div>
</div>
<div class="wrapper15">
<span class="btn_primary save" style="margin-left: 332px;"></span><span class="btn_primary back"></span>
<div class="clear"></div>
</div>
</div>
</div>
</div>
转载于:https://www.cnblogs.com/gaogaoxingxing/p/8477871.html
js form表单 鼠标移入弹出提示功能相关推荐
- js简单表单验证(弹出框)
登录和注册的弹出框的js验证 有些字段是不能为空的,那么我们就要通过验证判断:用户是否填写. 此时就要用到js验证. 登录 html <form action="" meth ...
- IDEA 插件开发 一个表单提交的弹出框
文章目录 IDEA 插件开发 一个表单提交的弹出框 1.说明 IDEA 插件开发 一个表单提交的弹出框 package com.wretchant.fredis.gui.dialog;import c ...
- js——form表单验证
用js实现一个简易的表单验证 效果: 代码: <html><head><title>js校验form表单</title><meta charset ...
- html表单记住密码按钮,js form表单提交,浏览器记住密码后自动填充
1.场景描述 用form表单实现的页面搜索,第一次搜索点击提交之后手机浏览器会提示保存用户名和密码,点了保存之后,再次进入这个页面这些值会直接在页面上,将input的值删除之后,点击搜索提交之后这些值 ...
- JS 刷新当前页面,JS 延迟跳转,HTML 弹出提示
JS刷新当前页面 方法一 reload()方法用于刷新当前页面 reload() 方法类似于浏览器上的刷新页面按钮 location.reload(); 方法二 replace() 方法可用一个新页面 ...
- 利用beforeSend实现提交加载中、form表单的重复提交等前端功能
前文 在用JQ+bootstrap写前端的时候,有时需要实现点击按钮后失效的功能,比如下载按钮,为了避免网络延迟而引起的页面不及时跳转,让用户多次点击按钮,造成的服务器压力和用户体验就都不友好.发 ...
- js form表单onsubmit事件用法详解
onsubmit事件是当表单提交时进行相关js操作的一个事件.(但是有疑问) onsubmit 事件会在表单中的确认按钮被点击时发生.当该事件触发的函数中返回false时,表单就不会被提交. 请看下面 ...
- js form表单转json字符串,json数组转json字符串出现多余的双引号问题解决
功能介绍 页面展示的是一个用户的基本信息,和该用户对应的几台车辆的信息,车辆的字段属性都一样.然后可以编辑这些信息,再保存到后台.那么就需要考虑将车辆信息转换为json数组类型的字符串 ...
- js如何关闭当前页,而不弹出提示框
//关闭当前页面,并且打开新页面,(不提示) function closeWinAndOpen(url) { //利用随机数处理WinName var sWinName = "LR" ...
最新文章
- BZOJ 2138 stone(霍尔定理推论,线段树)【BZOJ 修复工程】
- Linux多线程总结
- 静态程序分析chapter2 - IR(Jimple) 和 CFG
- 方立勋_30天掌握JavaWeb_JSP
- .NET Core中间件的注册和管道的构建(3) ---- 使用Map/MapWhen扩展方法
- Bootstrap补充
- 察颜观色保无忧—存储卡选购之四法则
- 【一题多解】平方根的计算及完全平方数的判断
- 字典-dict(无序)
- Excel表格中正数设置为红色负为绿色
- AAAI2021 | 在手机上实现19FPS实时的YOLObile目标检测,准确率超高
- DotNetTools Workflow教程
- 【vue】手动实现vue的v-model语法糖,以及控制在输入法完成之后才更新model
- cocos做飞机大战笔记【根据道具设置子弹】
- 图书馆炭火盆旁边的数学遐想
- 【Unity】获取当前物体下的所有子物体
- Unity吃豆人敌人BFS广度(宽度)优先算法实现怪物追踪玩家寻路
- 红米note2能刷机没显示无服务器,红米note2怎么刷机 红米note2刷机教程
- thunderbird重复的已发送
- HDUOJ 1078 FatMouse and Cheese
热门文章
- 关于阿里云备案和腾讯云备案的吐槽
- mysql不自动提交更改语句_MySQL设置事务自动提交(开启和关闭)
- Linux拉黑攻击IP,linux服务器如果被cc攻击怎么自动拉黑肉鸡IP(教程篇)
- html中getElementById() 方法
- 八数码问题matlab实现,用A*算法解决八数码问题 MATLAB
- 35岁的程序员:第15章,1对1视频
- 计算机ps作品大赛奖品,全国创新杯说课大赛计算机应用基础类一等奖作品:ps动态图像制作说课课件...
- 关于opencv遍历像素速度的提高方案
- Windows通过使用命令行(CACLS)修改文件权限
- Javaweb华为商城购物系统 servlet+jsp 源码