一个JavaScript的问题请教青年朋友们 人的一生！
点击联系发帖人
时间：2017-12-08 06:53
后使用快捷导航没有帐号？
只需一步，快速开始
查看: 3475|回复: 8
请教一个关于javascript中match匹配()分组的问题
UID203593在线时间 小时积分2221帖子离线17508 天注册时间
银牌会员, 积分 2221, 距离下一级还需 779 积分
在php的正则匹配中可以通过()来分组获取数据
JS中我尝试通过这样的方法获取数据，如下：
var str = '?id=21&rid=4&page=5';
var test = str.match(/[&|?](.+?)=(.+?)&?/gim);
& & & &
alert(test[0]);& & //打印出?id=21&
alert(test[0][1]);& & //打印出i复制代码
显然test[0]返回的是一个字符串，而不是我要的数据，也就不能通过test[0][1]这样的方法获取到我要的数据。
请问在JS中有像PHP那样通过()分组的方式吗？
UID203593在线时间 小时积分2221帖子离线17508 天注册时间
银牌会员, 积分 2221, 距离下一级还需 779 积分
我将正则规则改了下，如下
var str = '?id=21&rid=4&page=5';
var test = /[&|?](.+?)=(.+?)&?/gim.exec(str);
alert(test[1]);复制代码
这样似乎能正常打印数组了，但是测试结果出现了几个问题：
1.匹配出来的是一个长度为3的数组，键值分别为?id=2，id，2
2.这样匹配就不贪婪了
3.返回回来的数组仍旧是一维数组，在多个参数的情况下，不方便我上面说的按照()分组去取特定的数据
UID203593在线时间 小时积分2221帖子离线17508 天注册时间
银牌会员, 积分 2221, 距离下一级还需 779 积分
继续修改代码，将惰性匹配的?去掉
var str = '?id=21&rid=4&page=5';
var test = url.match(/([^&?]+)=([^&?]*)/gim);
alert(test);复制代码
这次返回的数据是id=21,rid=4,page=5；返回的数据是正确了，但是不是我希望的二维数组
是JS本身没办法实现吗？
UID341738在线时间 小时积分6216帖子离线17508 天注册时间
可以大致模仿一下
String.prototype.pmatch = function(reg){
if( !(reg instanceof RegExp) || !reg.global ) return 0;
var a=[],b;
while(b=reg.exec(this)){
b.shift();
a.push(b);
return a.length&0?a:0;
var str = '?id=21&rid=4&page=5',
test = str.pmatch(/[&|?](.+?)=(.+?)(?:&|$)/gim);
alert(test[0]);
//打印出?id=21&
alert(test[0][1]);
alert(test[1]);
//打印出?id=21&
alert(test[1][1]);
&提示：您可以先修改部分代码再运行
UID203593在线时间 小时积分2221帖子离线17508 天注册时间
银牌会员, 积分 2221, 距离下一级还需 779 积分
原帖由 [i]hansir 于
22:12 发表
可以大致模仿一下
& & & & String.prototype.pmatch = function(reg){
& & & & & & & & if( !(reg instanceof RegExp) || !reg.global ) return 0;
& & & & & & & & var a=[],b;
& & & & & & & & while(b=reg.exec(this)){
& & & & & & & & & & & & b.shift();
& & & & & & & & & & & & a.push(b);
UID323880在线时间 小时积分1699帖子离线17508 天注册时间
银牌会员, 积分 1699, 距离下一级还需 1301 积分
js里稍微麻烦点
var str = '?id=21&rid=4&page=5', reg = /[&|?](.+?)=(.+?)/gi,
while(result = reg.exec(str)) alert(result[1]+':'+result[2])
&提示：您可以先修改部分代码再运行
UID341738在线时间 小时积分6216帖子离线17508 天注册时间
改进一下，在没有加修正符g的时候，只匹配一组
String.prototype.pmatch = function(reg){
& & & & if( !(reg instanceof RegExp)) return 0;
& & & & if( !reg.global ) {
& & & & & & & & var a = this.match(reg);
& & & & & & & & return a? [a.slice(1,a.length)] : 0;
& & & & var a=[],b;
& & & & while(b=reg.exec(this)){
& & & & & & & & b.shift();
& & & & & & & & a.push(b);
& & & & return a.length&0?a:0;
UID203593在线时间 小时积分2221帖子离线17508 天注册时间
银牌会员, 积分 2221, 距离下一级还需 779 积分
原帖由 [i]CNwander 于
22:22 发表
js里稍微麻烦点
var str = '?id=21&rid=4&page=5', reg = /[&|?](.+?)=(.+?)/gi,
while(result = reg.exec(str)) alert(result[1]+':'+result[2])
&提示：您可以先修改部分代码再运行
谢谢，我的做法和你差不多，我是这么写的
for (var i = 0; i & group. i++)
& & & & var row = group[i].split('=');
& & & & get[row[0]] = row[1]
UID203593在线时间 小时积分2221帖子离线17508 天注册时间
银牌会员, 积分 2221, 距离下一级还需 779 积分
原帖由 [i]hansir 于
22:26 发表
改进一下，在没有加修正符g的时候，只匹配一组
String.prototype.pmatch = function(reg){
& & & & if( !(reg instanceof RegExp)) return 0;
& & & & if( !reg.global ) {
& & & & & & & & var a = this.match(reg);
& & & & & & & & return a? [a.slice( ...
非常感谢！！
Powered by07-2807-2908-3009-06
10-0109-3009-2909-27
◇本站云标签sponsored links
请教一个问题， 百度地图的javascript api 能否用触摸方式动态画一个圆或者矩形
如题，请教下解决思路。
我自己实现了一下，可以自己在百度地图上随便画图形，基本原理就是，监听touch事件，touchMove，保存当前的经纬度，转化为pixel坐标，重复绘制线段，当touchEnd时，绘制矩形图形。最后会连接首位2点，并判断矩形是否有效，同时如果在画得过程中已经有闭合图形，则终止画图。
演示地址，需要使用手机浏览测试:
JS 实现代码:
var app = app || {};
app.BM = {
map: false,
init: function() {
// 百度地图API功能
this.map = new BMap.Map("allmap");
// 创建Map实例
this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 初始化地图,设置中心点坐标和地图级别
this.map.addControl(new BMap.MapTypeControl());
//添加地图类型控件
this.map.setCurrentCity("北京");
// 设置地图显示的城市 此项是必须设置的
this.map.enableScrollWheelZoom();
//开启鼠标滚轮缩放
this.map.enableDragging();
// 电子围栏
// @todo 数据交互部分
app.Fence = {
cache_points: [], // 缓存折线数据，取消操作时，重新画图。
polyline:false, // 百度折线覆盖物
points: [], // 折线数据 [H,H,H,...] H{lat:"",lng:""}
coordinate: [], // 像素数据 [P,P,...] P{x:"",y:""}
cur_point: false,
cur_pixel: false,
isOver: false, // 围栏是否已经完成
cross_at: false, // 相交的点索引
state: 0, // 界面状态 0 待设定状态, 1 开始设定, 2 设定完成
polygon: false, // 完成后的栏栅覆盖物
polylineOption: {strokeColor:"blue", strokeWeight:4, strokeOpacity:0.5},
init: function() {
app.BM.init();
this.initClickEvent();
initClickEvent: function() {
// 设定或取消
document.getElementById('action').addEventListener('click', this.clickSettingHandler, false);
// 确定或重新设定事件监听
document.getElementById('setok').addEventListener('click', this.setOKHandler, false);
document.getElementById('reset').addEventListener('click', this.resetHandler, false);
clickSettingHandler: function(){
if (app.Fence.state == 0)
app.Fence.initTouchEvent();
if (app.Fence.polygon){
app.BM.map.removeOverlay(app.Fence.polygon);
app.Fence.resetData();
app.Fence.state = 1;
app.Fence.setElementHidden('fence_show');
app.Fence.setElementDisplay('fence_begin_draw');
document.getElementById('action').innerHTML = "取消";
app.Fence.removeTouchEvent();
if (app.Fence.polyline) {
app.BM.map.removeOverlay(app.Fence.polyline);
app.Fence.resetData();
app.Fence.state = 0;
if (app.Fence.cache_points) {
app.Fence.polygon = new BMap.Polygon(app.Fence.cache_points, app.Fence.polylineOption);
app.BM.map.addOverlay(app.Fence.polygon);
app.Fence.setElementDisplay('fence_show');
app.Fence.setElementHidden('fence_begin_draw');
document.getElementById('action').innerHTML = "设定";
finishDrawing: function(){
app.Fence.state = 2;
// 画图完成后立即清除移动
app.Fence.removeTouchEvent();
app.Fence.setElementHidden('fence_begin_draw');
app.Fence.setElementDisplay('fence_end_draw');
drawPolygon: function(){
app.BM.map.removeOverlay(app.Fence.polyline);
app.Fence.polygon = new BMap.Polygon(app.Fence.points, app.Fence.polylineOption);
app.BM.map.addOverlay(app.Fence.polygon);
removeClickEvent: function(){
document.getElementById('setok').removeEventListener('click', app.Fence.setOKHandler, false);
document.getElementById('reset').removeEventListener('click', app.Fence.resetHandler, false);
setOKHandler: function(){
app.Fence.state = 0;
// 最后画一个多边形polygon
app.Fence.drawPolygon();
app.Fence.setElementDisplay('fence_show');
app.Fence.setElementHidden('fence_end_draw');
document.getElementById('action').innerHTML = "设定";
document.getElementById('setting_state').innerHTML = "电子栏栅设定成功";
// 缓存数据
app.Fence.cache_points = app.Fence.
// @todo 同步数据到服务器
// 不满意，重新画图
resetHandler: function(){
app.Fence.state = 1;
app.BM.map.removeOverlay(app.Fence.polyline);
app.Fence.resetData();
app.Fence.initTouchEvent();
app.Fence.setElementHidden('fence_end_draw');
app.Fence.setElementDisplay('fence_begin_draw');
// 触摸事件 @important 开始画图时init 画完图后remove
initTouchEvent: function(){
app.BM.map.addEventListener("touchstart", app.Fence.touchStartHandler, false);
app.BM.map.addEventListener("touchend", app.Fence.touchEndHandler, false);
app.BM.map.addEventListener("touchmove", app.Fence.touchMoveHandler, false);
removeTouchEvent: function(){
app.BM.map.removeEventListener("touchstart", app.Fence.touchStartHandler, false);
app.BM.map.removeEventListener("touchend", app.Fence.touchEndHandler, false);
app.BM.map.removeEventListener("touchmove", app.Fence.touchMoveHandler, false);
touchStartHandler: function(){
app.BM.map.disableDragging();
app.Bm.map.disableScrollWheelZoom();
touchEndHandler: function(){
// 正确的画完图形
if (app.Fence.isOver){
app.Fence.finishDrawing();
if (!app.Fence.finalCheckIsCrossed())
var last = app.Fence.points.length - 1;
app.Fence.polyline = new BMap.Polyline([app.Fence.points[0], app.Fence.points[last]], app.Fence.polylineOption);
//创建多边形
app.BM.map.addOverlay(app.Fence.polyline);
app.Fence.finishDrawing();
alert("电子栏栅设定错误，请重新设定！");
app.BM.map.removeOverlay(app.Fence.polyline);
app.Fence.resetData();
app.Fence.state = 1;
app.Fence.setElementHidden('fence_end_draw');
app.Fence.setElementDisplay('fence_begin_draw');
app.BM.map.enableDragging();
app.BM.map.enableScrollWheelZoom();
touchMoveHandler: function(e){
app.Fence.cur_point = e.
app.Fence.cur_pixel = e.
app.Fence.points.push(e.point);
app.Fence.coordinate.push(e.pixel);
if (app.Fence.checkIsCrossed())
app.Fence.redrawPolyline();
app.Fence.isOver =
if (!app.Fence.isOver) app.Fence.redraw();
checkIsCrossed: function(){
var last = app.Fence.coordinate.length - 1;
for (var i = 1; i & last - 2; i++)
if (last & 5 && app.Fence.intersect(app.Fence.coordinate[last-1], app.Fence.coordinate[last], app.Fence.coordinate[i-1], app.Fence.coordinate[i]))
app.Fence.cross_at =
finalCheckIsCrossed: function(){
var last = app.Fence.coordinate.length - 1;
for (var i = 2; i & last - 2; i++)
if (app.Fence.intersect(app.Fence.coordinate[i-1], app.Fence.coordinate[i], app.Fence.coordinate[0], app.Fence.coordinate[last]))
redrawPolyline: function(){
app.Fence.points.splice(0, app.Fence.cross_at);
// 重画图形
if (app.Fence.polyline) {
app.BM.map.removeOverlay(app.Fence.polyline);
if (app.Fence.points)
app.Fence.polyline = new BMap.Polyline(app.Fence.points, app.Fence.polylineOption);
//创建多边形
app.BM.map.addOverlay(app.Fence.polyline);
//增加多边形
var last = app.Fence.points.length -1 ;
app.Fence.polyline = new BMap.Polyline([app.Fence.points[0], app.Fence.points[last]], app.Fence.polylineOption);
//创建多边形
app.BM.map.addOverlay(app.Fence.polyline);
redraw: function(){
if (app.Fence.polyline) {
app.BM.map.removeOverlay(app.Fence.polyline);
if (app.Fence.points)
app.Fence.polyline = new BMap.Polyline(app.Fence.points, app.Fence.polylineOption);
//创建多边形
app.BM.map.addOverlay(app.Fence.polyline);
//增加多边形
/* 叉积 判断2条线段是否相交 */
mult: function(a, b, c) {
return (a.x-c.x)*(b.y-c.y)-(b.x-c.x)*(a.y-c.y);
/* pa, pb为一条线段两端点 pc, pd为另一条线段的两端点 相交返回true, 不相交返回false*/
intersect: function(pa, pb, pc, pd) {
if ( Math.max(pa.x, pb.x)&Math.min(pc.x, pd.x) )
if ( Math.max(pa.y, pb.y)&Math.min(pc.y, pd.y) )
if ( Math.max(pc.x, pd.x)&Math.min(pa.x, pb.x) )
if ( Math.max(pc.y, pd.y)&Math.min(pa.y, pb.y) )
if ( app.Fence.mult(pc, pb, pa)*app.Fence.mult(pb, pd, pa)&0 )
if ( app.Fence.mult(pa, pd, pc)*app.Fence.mult(pd, pb, pc)&0 )
resetData: function(){
app.Fence.polyline =
app.Fence.points = [];
app.Fence.coordinate = [];
app.Fence.isOver =
app.Fence.cur_point =
app.Fence.cur_pixel =
app.Fence.polygon =
setElementDisplay:function(id){
document.getElementById(id).style.display = "block";
setElementHidden: function(id){
document.getElementById(id).style.display = "none";
触摸时获取触摸点的经纬度，然后调用api里画圆的方法画圆
/map/reference/index.phptitle=Class:%E8%A6%8...百度地图API的Circle类画圆
1.首先获取百度 JavaScript API 首先用浏览器打开 http://api./api?v=1.3 如下图所示 其中 http://api./getscript?v=1.3&key=&services=&t=54 这个链接就是我们要找的API文件,
出处:/i-gps/archive//2791826.html 1.首先获取百度 JavaScript API 首先用浏览器打开 http://api./api?v=1.3 如下图所示 其中 http://api./getscript?v=1. ...
百度地图Web服务API为开发者提供http接口,即开发者通过http形式发起检索请求,获取返回json或xml格式的检索数据.用户可以基于此开发JavaScript.C#.C++.Java等语言的地图应用. api官网说明链接: /map/webservice.htm 可用接口列举: 获取相关地址提示 p ...
百度地图Web服务API为开发者提供http接口,即开发者通过http形式发起检索请求,获取返回json或xml格式的检索数据.用户可以基于此开发JavaScript.C#.C++.Java等语言的地图应用. api官网说明链接: /map/webservice.htm 可用接口列举: 获取相关地址提示 p ...
最近公司项目中需要根据两个地点的交通路径和距离做一些数据推荐,为了程序的稳定和用户体验所以想从百度地图 API 采集数据保存到数据库中,经过一翻研究之后选定了百度地图 Web 服务 API 中的 Direction API ,最后写了个服务去定时采集. 关于 Direction API 的相关说明这里不做详细阐述了,大家可以去百度地图 API 的页面去详细了 ...请教下php与js之间的问题 - ThinkPHP框架
作为一个php初学者，自己兴趣很高，但遇到的困难也是各种各样，辛亏有这个地方，大大们愿意热心的帮助我，我真不知道该怎么感谢了，只能说如果我能到达帮助别人的地步，我也尽量的帮助别人吧，现在看别人的源码，就实现一个 省
县的 下拉框 ，方法也是多种多样啊，有人用js实现 jason传入数据，代码很简单 ，有人把数据存在数据库中，还建了模型，定义了方法，并且用widget(thinksns中的代码)，实话说看的我头疼，这就有个问题有些东西js和php都能做，我们到底应该用哪个？他们之间有何优缺点哪？为什么能用js实现的东西 ，大神们（写thinksns）还要用php来实现哪？
ThinkPHP 是一个免费开源的，快速、简单的面向对象的 轻量级PHP开发框架 ，创立于2006年初，遵循Apache2开源协议发布，是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，也注重易用性。并且拥有众多的原创功能和特性，在社区团队的积极参与下，在易用性、扩展性和性能方面不断优化和改进，已经成长为国内最领先和最具影响力的WEB应用开发框架，众多的典型案例确保可以稳定用于商业以及门户级的开发。javascript-请教Validform表单验证的显示样式问题
作者：用户
浏览：657 次
请教Validform表单验证的显示样式问题比如说,我的这个input是这样写的,使用Validform在js中tiptype=3.于是为空在input下面会跳出[请输入用户名],通过会跳出[通过信息
请教Validform表单验证的显示样式问题
比如说,我的这个input是这样写的, 使用Validform在js中tiptype=3 . 于是为空在input下面会跳出[请输入用户名 ],通过会跳出[通过信息验证].
有没有办法让[通过信息验证]不出现 ?
能不能让错误全部放在一个地方显示?
请教一下 , 谢谢.
一种是使用ajax进行操作
一种是通过控制显示和隐藏来实现
解决方案二：
用ajax操作就可以完成，你去找段代码看一看就会了
解决方案三：
想在哪里写就在那里加标签就可以了 然后用DOM 操作
if (y==""|| y==null)
$('#control-count-span').html("");
$('#control-title-span').html("*请填写标题*");
解决方案四：
想在哪里写就在那里加标签就可以了 然后用DOM 操作
if (y==""|| y==null)
$('#control-count-span').html("");
$('#control-title-span').html("*请填写标题*");
【云栖快讯】2017互联网超级工程阿里双11完美落幕，交易额突破1682亿，但阿里工程师如何玩转“超级工程”，背后黑科技又是如何？12月13-14日，12位大咖直播分享揭秘1682亿背后技术实践，马上预约&&
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
6款热门基础云产品6个月免费体验；2款产品1年体验;1款产品2年体验
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
开发者常用软件，超百款实用软件一站式提供}
只需一步，快速开始
查看: 3475|回复: 8
请教一个关于javascript中match匹配()分组的问题
UID203593在线时间 小时积分2221帖子离线17508 天注册时间
银牌会员, 积分 2221, 距离下一级还需 779 积分
在php的正则匹配中可以通过()来分组获取数据
JS中我尝试通过这样的方法获取数据，如下：
var str = '?id=21&rid=4&page=5';
var test = str.match(/[&|?](.+?)=(.+?)&?/gim);
& & & &
alert(test[0]);& & //打印出?id=21&
alert(test[0][1]);& & //打印出i复制代码
显然test[0]返回的是一个字符串，而不是我要的数据，也就不能通过test[0][1]这样的方法获取到我要的数据。
请问在JS中有像PHP那样通过()分组的方式吗？
UID203593在线时间 小时积分2221帖子离线17508 天注册时间
银牌会员, 积分 2221, 距离下一级还需 779 积分
我将正则规则改了下，如下
var str = '?id=21&rid=4&page=5';
var test = /[&|?](.+?)=(.+?)&?/gim.exec(str);
alert(test[1]);复制代码
这样似乎能正常打印数组了，但是测试结果出现了几个问题：
1.匹配出来的是一个长度为3的数组，键值分别为?id=2，id，2
2.这样匹配就不贪婪了
3.返回回来的数组仍旧是一维数组，在多个参数的情况下，不方便我上面说的按照()分组去取特定的数据
UID203593在线时间 小时积分2221帖子离线17508 天注册时间
银牌会员, 积分 2221, 距离下一级还需 779 积分
继续修改代码，将惰性匹配的?去掉
var str = '?id=21&rid=4&page=5';
var test = url.match(/([^&?]+)=([^&?]*)/gim);
alert(test);复制代码
这次返回的数据是id=21,rid=4,page=5；返回的数据是正确了，但是不是我希望的二维数组
是JS本身没办法实现吗？
UID341738在线时间 小时积分6216帖子离线17508 天注册时间
可以大致模仿一下
String.prototype.pmatch = function(reg){
if( !(reg instanceof RegExp) || !reg.global ) return 0;
var a=[],b;
while(b=reg.exec(this)){
b.shift();
a.push(b);
return a.length&0?a:0;
var str = '?id=21&rid=4&page=5',
test = str.pmatch(/[&|?](.+?)=(.+?)(?:&|$)/gim);
alert(test[0]);
//打印出?id=21&
alert(test[0][1]);
alert(test[1]);
//打印出?id=21&
alert(test[1][1]);
&提示：您可以先修改部分代码再运行
UID203593在线时间 小时积分2221帖子离线17508 天注册时间
银牌会员, 积分 2221, 距离下一级还需 779 积分
原帖由 [i]hansir 于
22:12 发表
可以大致模仿一下
& & & & String.prototype.pmatch = function(reg){
& & & & & & & & if( !(reg instanceof RegExp) || !reg.global ) return 0;
& & & & & & & & var a=[],b;
& & & & & & & & while(b=reg.exec(this)){
& & & & & & & & & & & & b.shift();
& & & & & & & & & & & & a.push(b);
UID323880在线时间 小时积分1699帖子离线17508 天注册时间
银牌会员, 积分 1699, 距离下一级还需 1301 积分
js里稍微麻烦点
var str = '?id=21&rid=4&page=5', reg = /[&|?](.+?)=(.+?)/gi,
while(result = reg.exec(str)) alert(result[1]+':'+result[2])
&提示：您可以先修改部分代码再运行
UID341738在线时间 小时积分6216帖子离线17508 天注册时间
改进一下，在没有加修正符g的时候，只匹配一组
String.prototype.pmatch = function(reg){
& & & & if( !(reg instanceof RegExp)) return 0;
& & & & if( !reg.global ) {
& & & & & & & & var a = this.match(reg);
& & & & & & & & return a? [a.slice(1,a.length)] : 0;
& & & & var a=[],b;
& & & & while(b=reg.exec(this)){
& & & & & & & & b.shift();
& & & & & & & & a.push(b);
& & & & return a.length&0?a:0;
UID203593在线时间 小时积分2221帖子离线17508 天注册时间
银牌会员, 积分 2221, 距离下一级还需 779 积分
原帖由 [i]CNwander 于
22:22 发表
js里稍微麻烦点
var str = '?id=21&rid=4&page=5', reg = /[&|?](.+?)=(.+?)/gi,
while(result = reg.exec(str)) alert(result[1]+':'+result[2])
&提示：您可以先修改部分代码再运行
谢谢，我的做法和你差不多，我是这么写的
for (var i = 0; i & group. i++)
& & & & var row = group[i].split('=');
& & & & get[row[0]] = row[1]
UID203593在线时间 小时积分2221帖子离线17508 天注册时间
银牌会员, 积分 2221, 距离下一级还需 779 积分
原帖由 [i]hansir 于
22:26 发表
改进一下，在没有加修正符g的时候，只匹配一组
String.prototype.pmatch = function(reg){
& & & & if( !(reg instanceof RegExp)) return 0;
& & & & if( !reg.global ) {
& & & & & & & & var a = this.match(reg);
& & & & & & & & return a? [a.slice( ...
非常感谢！！
Powered by07-2807-2908-3009-06
10-0109-3009-2909-27
◇本站云标签sponsored links
请教一个问题， 百度地图的javascript api 能否用触摸方式动态画一个圆或者矩形
如题，请教下解决思路。
我自己实现了一下，可以自己在百度地图上随便画图形，基本原理就是，监听touch事件，touchMove，保存当前的经纬度，转化为pixel坐标，重复绘制线段，当touchEnd时，绘制矩形图形。最后会连接首位2点，并判断矩形是否有效，同时如果在画得过程中已经有闭合图形，则终止画图。
演示地址，需要使用手机浏览测试:
JS 实现代码:
var app = app || {};
app.BM = {
map: false,
init: function() {
// 百度地图API功能
this.map = new BMap.Map("allmap");
// 创建Map实例
this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 初始化地图,设置中心点坐标和地图级别
this.map.addControl(new BMap.MapTypeControl());
//添加地图类型控件
this.map.setCurrentCity("北京");
// 设置地图显示的城市 此项是必须设置的
this.map.enableScrollWheelZoom();
//开启鼠标滚轮缩放
this.map.enableDragging();
// 电子围栏
// @todo 数据交互部分
app.Fence = {
cache_points: [], // 缓存折线数据，取消操作时，重新画图。
polyline:false, // 百度折线覆盖物
points: [], // 折线数据 [H,H,H,...] H{lat:"",lng:""}
coordinate: [], // 像素数据 [P,P,...] P{x:"",y:""}
cur_point: false,
cur_pixel: false,
isOver: false, // 围栏是否已经完成
cross_at: false, // 相交的点索引
state: 0, // 界面状态 0 待设定状态, 1 开始设定, 2 设定完成
polygon: false, // 完成后的栏栅覆盖物
polylineOption: {strokeColor:"blue", strokeWeight:4, strokeOpacity:0.5},
init: function() {
app.BM.init();
this.initClickEvent();
initClickEvent: function() {
// 设定或取消
document.getElementById('action').addEventListener('click', this.clickSettingHandler, false);
// 确定或重新设定事件监听
document.getElementById('setok').addEventListener('click', this.setOKHandler, false);
document.getElementById('reset').addEventListener('click', this.resetHandler, false);
clickSettingHandler: function(){
if (app.Fence.state == 0)
app.Fence.initTouchEvent();
if (app.Fence.polygon){
app.BM.map.removeOverlay(app.Fence.polygon);
app.Fence.resetData();
app.Fence.state = 1;
app.Fence.setElementHidden('fence_show');
app.Fence.setElementDisplay('fence_begin_draw');
document.getElementById('action').innerHTML = "取消";
app.Fence.removeTouchEvent();
if (app.Fence.polyline) {
app.BM.map.removeOverlay(app.Fence.polyline);
app.Fence.resetData();
app.Fence.state = 0;
if (app.Fence.cache_points) {
app.Fence.polygon = new BMap.Polygon(app.Fence.cache_points, app.Fence.polylineOption);
app.BM.map.addOverlay(app.Fence.polygon);
app.Fence.setElementDisplay('fence_show');
app.Fence.setElementHidden('fence_begin_draw');
document.getElementById('action').innerHTML = "设定";
finishDrawing: function(){
app.Fence.state = 2;
// 画图完成后立即清除移动
app.Fence.removeTouchEvent();
app.Fence.setElementHidden('fence_begin_draw');
app.Fence.setElementDisplay('fence_end_draw');
drawPolygon: function(){
app.BM.map.removeOverlay(app.Fence.polyline);
app.Fence.polygon = new BMap.Polygon(app.Fence.points, app.Fence.polylineOption);
app.BM.map.addOverlay(app.Fence.polygon);
removeClickEvent: function(){
document.getElementById('setok').removeEventListener('click', app.Fence.setOKHandler, false);
document.getElementById('reset').removeEventListener('click', app.Fence.resetHandler, false);
setOKHandler: function(){
app.Fence.state = 0;
// 最后画一个多边形polygon
app.Fence.drawPolygon();
app.Fence.setElementDisplay('fence_show');
app.Fence.setElementHidden('fence_end_draw');
document.getElementById('action').innerHTML = "设定";
document.getElementById('setting_state').innerHTML = "电子栏栅设定成功";
// 缓存数据
app.Fence.cache_points = app.Fence.
// @todo 同步数据到服务器
// 不满意，重新画图
resetHandler: function(){
app.Fence.state = 1;
app.BM.map.removeOverlay(app.Fence.polyline);
app.Fence.resetData();
app.Fence.initTouchEvent();
app.Fence.setElementHidden('fence_end_draw');
app.Fence.setElementDisplay('fence_begin_draw');
// 触摸事件 @important 开始画图时init 画完图后remove
initTouchEvent: function(){
app.BM.map.addEventListener("touchstart", app.Fence.touchStartHandler, false);
app.BM.map.addEventListener("touchend", app.Fence.touchEndHandler, false);
app.BM.map.addEventListener("touchmove", app.Fence.touchMoveHandler, false);
removeTouchEvent: function(){
app.BM.map.removeEventListener("touchstart", app.Fence.touchStartHandler, false);
app.BM.map.removeEventListener("touchend", app.Fence.touchEndHandler, false);
app.BM.map.removeEventListener("touchmove", app.Fence.touchMoveHandler, false);
touchStartHandler: function(){
app.BM.map.disableDragging();
app.Bm.map.disableScrollWheelZoom();
touchEndHandler: function(){
// 正确的画完图形
if (app.Fence.isOver){
app.Fence.finishDrawing();
if (!app.Fence.finalCheckIsCrossed())
var last = app.Fence.points.length - 1;
app.Fence.polyline = new BMap.Polyline([app.Fence.points[0], app.Fence.points[last]], app.Fence.polylineOption);
//创建多边形
app.BM.map.addOverlay(app.Fence.polyline);
app.Fence.finishDrawing();
alert("电子栏栅设定错误，请重新设定！");
app.BM.map.removeOverlay(app.Fence.polyline);
app.Fence.resetData();
app.Fence.state = 1;
app.Fence.setElementHidden('fence_end_draw');
app.Fence.setElementDisplay('fence_begin_draw');
app.BM.map.enableDragging();
app.BM.map.enableScrollWheelZoom();
touchMoveHandler: function(e){
app.Fence.cur_point = e.
app.Fence.cur_pixel = e.
app.Fence.points.push(e.point);
app.Fence.coordinate.push(e.pixel);
if (app.Fence.checkIsCrossed())
app.Fence.redrawPolyline();
app.Fence.isOver =
if (!app.Fence.isOver) app.Fence.redraw();
checkIsCrossed: function(){
var last = app.Fence.coordinate.length - 1;
for (var i = 1; i & last - 2; i++)
if (last & 5 && app.Fence.intersect(app.Fence.coordinate[last-1], app.Fence.coordinate[last], app.Fence.coordinate[i-1], app.Fence.coordinate[i]))
app.Fence.cross_at =
finalCheckIsCrossed: function(){
var last = app.Fence.coordinate.length - 1;
for (var i = 2; i & last - 2; i++)
if (app.Fence.intersect(app.Fence.coordinate[i-1], app.Fence.coordinate[i], app.Fence.coordinate[0], app.Fence.coordinate[last]))
redrawPolyline: function(){
app.Fence.points.splice(0, app.Fence.cross_at);
// 重画图形
if (app.Fence.polyline) {
app.BM.map.removeOverlay(app.Fence.polyline);
if (app.Fence.points)
app.Fence.polyline = new BMap.Polyline(app.Fence.points, app.Fence.polylineOption);
//创建多边形
app.BM.map.addOverlay(app.Fence.polyline);
//增加多边形
var last = app.Fence.points.length -1 ;
app.Fence.polyline = new BMap.Polyline([app.Fence.points[0], app.Fence.points[last]], app.Fence.polylineOption);
//创建多边形
app.BM.map.addOverlay(app.Fence.polyline);
redraw: function(){
if (app.Fence.polyline) {
app.BM.map.removeOverlay(app.Fence.polyline);
if (app.Fence.points)
app.Fence.polyline = new BMap.Polyline(app.Fence.points, app.Fence.polylineOption);
//创建多边形
app.BM.map.addOverlay(app.Fence.polyline);
//增加多边形
/* 叉积 判断2条线段是否相交 */
mult: function(a, b, c) {
return (a.x-c.x)*(b.y-c.y)-(b.x-c.x)*(a.y-c.y);
/* pa, pb为一条线段两端点 pc, pd为另一条线段的两端点 相交返回true, 不相交返回false*/
intersect: function(pa, pb, pc, pd) {
if ( Math.max(pa.x, pb.x)&Math.min(pc.x, pd.x) )
if ( Math.max(pa.y, pb.y)&Math.min(pc.y, pd.y) )
if ( Math.max(pc.x, pd.x)&Math.min(pa.x, pb.x) )
if ( Math.max(pc.y, pd.y)&Math.min(pa.y, pb.y) )
if ( app.Fence.mult(pc, pb, pa)*app.Fence.mult(pb, pd, pa)&0 )
if ( app.Fence.mult(pa, pd, pc)*app.Fence.mult(pd, pb, pc)&0 )
resetData: function(){
app.Fence.polyline =
app.Fence.points = [];
app.Fence.coordinate = [];
app.Fence.isOver =
app.Fence.cur_point =
app.Fence.cur_pixel =
app.Fence.polygon =
setElementDisplay:function(id){
document.getElementById(id).style.display = "block";
setElementHidden: function(id){
document.getElementById(id).style.display = "none";
触摸时获取触摸点的经纬度，然后调用api里画圆的方法画圆
/map/reference/index.phptitle=Class:%E8%A6%8...百度地图API的Circle类画圆
1.首先获取百度 JavaScript API 首先用浏览器打开 http://api./api?v=1.3 如下图所示 其中 http://api./getscript?v=1.3&key=&services=&t=54 这个链接就是我们要找的API文件,
出处:/i-gps/archive//2791826.html 1.首先获取百度 JavaScript API 首先用浏览器打开 http://api./api?v=1.3 如下图所示 其中 http://api./getscript?v=1. ...
百度地图Web服务API为开发者提供http接口,即开发者通过http形式发起检索请求,获取返回json或xml格式的检索数据.用户可以基于此开发JavaScript.C#.C++.Java等语言的地图应用. api官网说明链接: /map/webservice.htm 可用接口列举: 获取相关地址提示 p ...
百度地图Web服务API为开发者提供http接口,即开发者通过http形式发起检索请求,获取返回json或xml格式的检索数据.用户可以基于此开发JavaScript.C#.C++.Java等语言的地图应用. api官网说明链接: /map/webservice.htm 可用接口列举: 获取相关地址提示 p ...
最近公司项目中需要根据两个地点的交通路径和距离做一些数据推荐,为了程序的稳定和用户体验所以想从百度地图 API 采集数据保存到数据库中,经过一翻研究之后选定了百度地图 Web 服务 API 中的 Direction API ,最后写了个服务去定时采集. 关于 Direction API 的相关说明这里不做详细阐述了,大家可以去百度地图 API 的页面去详细了 ...请教下php与js之间的问题 - ThinkPHP框架
作为一个php初学者，自己兴趣很高，但遇到的困难也是各种各样，辛亏有这个地方，大大们愿意热心的帮助我，我真不知道该怎么感谢了，只能说如果我能到达帮助别人的地步，我也尽量的帮助别人吧，现在看别人的源码，就实现一个 省
县的 下拉框 ，方法也是多种多样啊，有人用js实现 jason传入数据，代码很简单 ，有人把数据存在数据库中，还建了模型，定义了方法，并且用widget(thinksns中的代码)，实话说看的我头疼，这就有个问题有些东西js和php都能做，我们到底应该用哪个？他们之间有何优缺点哪？为什么能用js实现的东西 ，大神们（写thinksns）还要用php来实现哪？
ThinkPHP 是一个免费开源的，快速、简单的面向对象的 轻量级PHP开发框架 ，创立于2006年初，遵循Apache2开源协议发布，是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，也注重易用性。并且拥有众多的原创功能和特性，在社区团队的积极参与下，在易用性、扩展性和性能方面不断优化和改进，已经成长为国内最领先和最具影响力的WEB应用开发框架，众多的典型案例确保可以稳定用于商业以及门户级的开发。javascript-请教Validform表单验证的显示样式问题
作者：用户
浏览：657 次
请教Validform表单验证的显示样式问题比如说,我的这个input是这样写的,使用Validform在js中tiptype=3.于是为空在input下面会跳出[请输入用户名],通过会跳出[通过信息
请教Validform表单验证的显示样式问题
比如说,我的这个input是这样写的, 使用Validform在js中tiptype=3 . 于是为空在input下面会跳出[请输入用户名 ],通过会跳出[通过信息验证].
有没有办法让[通过信息验证]不出现 ?
能不能让错误全部放在一个地方显示?
请教一下 , 谢谢.
一种是使用ajax进行操作
一种是通过控制显示和隐藏来实现
解决方案二：
用ajax操作就可以完成，你去找段代码看一看就会了
解决方案三：
想在哪里写就在那里加标签就可以了 然后用DOM 操作
if (y==""|| y==null)
$('#control-count-span').html("");
$('#control-title-span').html("*请填写标题*");
解决方案四：
想在哪里写就在那里加标签就可以了 然后用DOM 操作
if (y==""|| y==null)
$('#control-count-span').html("");
$('#control-title-span').html("*请填写标题*");
【云栖快讯】2017互联网超级工程阿里双11完美落幕，交易额突破1682亿，但阿里工程师如何玩转“超级工程”，背后黑科技又是如何？12月13-14日，12位大咖直播分享揭秘1682亿背后技术实践，马上预约&&
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
6款热门基础云产品6个月免费体验；2款产品1年体验;1款产品2年体验
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
开发者常用软件，超百款实用软件一站式提供}
我要回帖
更多关于 汤玛仕和朋友们 的文章
更多推荐
- ·访\问权彼被收回是不是就关闭了了开通的抖音被锁定多久自动解除数剧功能哦？
- ·物流物流公司成立需要什么条件许可证吗
- ·可儿芬意芬内衣品牌介绍为何能够迅速发展？
- ·为什么餐饮品牌全案策划公司要做品牌全案？
- ·想问一下大家可不可以给我推荐几个虚拟学校APP？类似于学生用costudy软件利弊的那种，求求了
- ·我的无线鼠标不听使唤今天突然不好使了，就连鼠标指针也不显示了，鼠标属性里还显示设备正常运转，跪求解决！
- ·声明式 跟spring aop与事务管理管理事务有什么不同
- ·电脑有辐射吗，我晚上用电脑会对我的白癜风有影响么！
- ·hpv病毒传染家人吗亚健康传染吗
- ·华硕主板怎么还原系统如何还原BIOS设定？
- ·常熟 哪有太阳能哪有教五笔打字的
- ·王者荣耀怎么赠送皮肤新皮肤可以赠送吗
- ·查看360浏览器界面显示不全历史记录，显示过的界面或者图片
- ·利生源净水器骗局怎么样？
- ·416g内存显示8g可用 为什么显示只有216g内存显示8g可用可用
- ·怎样才能不能查怎样查询微信聊天记录录
- ·AE输出使用图像合成软件输出编号为什么不显，想要输出一个带通道的文字用在视频上，之前输出过了，文字低下是黑色，
- ·三星s8检测到潮湿到现在有问题吗
- ·请问还有短信轰炸机软件免费版的软件吗 有个无赖欠了我3000多 一年了也不还 各种理由推 实在不想忍了
- ·换共用网线怎么抢网速能否解决网速问题？
- ·一个JavaScript的问题请教青年朋友们 人的一生！
- ·怎么在怎样回答百度上的问题回答别人的问题
- ·steam上的GTA5steam官网注册账号号后这个怎么搞。
- ·怎么运动减瘦肚子和腰上赘肉运动上的赘肉最快最有效
- ·今天去看亚冠需演唱会要提前多久入场入场吗
- ·篮球加时算不算下半场买球赛比分以内
- ·为什么我看广州恒大球迷联盟在看台上整齐划一的跳很
- ·右脚舟状骨大腿骨折后肌肉萎缩为什么小腿肌肉无法伸
- ·当今门将雅辛要做到哪些成就才能超越雅辛的历史
- ·足球帝马竞95后爆头本泽马马破门克劳奇高难度
- ·为什么怎么练肱二头肌肌的肌峰很靠肩膀，显得很难看
- ·现在的同花顺排名，曼联英超排名能排在前三了吗
- ·拿破仑的国际象棋决定认命不再逃跑，象棋里的秘密他是不是得知
- ·雷鸟电视怎么样I55C装怎么看NBA直播
- ·NBAs8季前赛赛算比分吗？和球队成绩有影响吗
- ·中国足球是如何感情怎么会变成这样子子的
