小编And*_*ndy的帖子

表单输入实时反馈

我正在使用用户名的输入字段构造一个表单。我想使用正则表达式将用户名限制在很小的字符范围内,根据用户输入时与正则表达式相比输入的有效性,将文本的颜色从红色更改为绿色。

到目前为止,尽管对正则表达式进行了积极的测试,它仍然没有选择出任何无效的字符。

https://regex101.com/r/XPFy6c/1/

/^[A-Z0-9 -]+$/igm
Run Code Online (Sandbox Code Playgroud)

这是代码,这里是JSFiddle 。

/^[A-Z0-9 -]+$/igm
Run Code Online (Sandbox Code Playgroud)
const form = document.querySelector('form');
const input = document.querySelector('input');

const check = /^[A-Z0-9 -]+$/ig;

form.addEventListener("input", e => {
    const checkName = check.test(input.value);
    if(!check) {
        input.classList.add('invalid-name');
        input.classList.remove('valid-name');
    } else {
        input.classList.add('valid-name');
        input.classList.remove('invalid-name');
    }
})
Run Code Online (Sandbox Code Playgroud)
.invalid-name {
  color: red;
}

.valid-name {
  color: green;
}
Run Code Online (Sandbox Code Playgroud)

更新:尽管此问题已解决,但是如果您尝试使用该代码,则会注意到正则表达式交替为真/假仍然存在问题。这个问题的解决方案在这里

javascript

2
推荐指数
1
解决办法
55
查看次数

使用"data-href"将图像加载到DIV中

我正在尝试获取一个链接,单击该链接时会将图像加载到DIV中.这是我到目前为止所拥有的:

http://jsfiddle.net/AndyMP/kgvux/

JQuery的

$(function () {
    $(".link").click(function (e) {
        var url = $(this).data('href')
        $('.enclosure').load(url)
        return false;
    });
});
Run Code Online (Sandbox Code Playgroud)

HTML

.enclosure {
    width: 400px;
    height: 200px;
    border: 1px solid black;
    overflow: hidden;
}
.link {
    cursor: pointer;
}
Run Code Online (Sandbox Code Playgroud)

HTML

<div class="enclosure">
    <img src="http://news.bbcimg.co.uk/media/images/67419000/jpg/_67419697_hull-getty.jpg">
</div>
<div class="link" data-href="http://news.bbcimg.co.uk/media/images/67424000/jpg/_67424686_67424685.jpg">Click me</div>
Run Code Online (Sandbox Code Playgroud)

jquery

1
推荐指数
1
解决办法
2071
查看次数

DIV中的中心图像

关于SO的讨论很多,但我尝试了一些没有成功的建议.我有一个DIV,我需要一个图像,其高度和宽度是未知的,水平和垂直居中.

我也需要这么多次,所以我不想每次都要添加更多的CSS代码.

这就是我在DIV的CSS和HTML方面所拥有的.

.gallery_image_container {
    position: relative;
    width: 830px;
    height: 500px;
    z-index: 7;
    border: solid 4px #EAEAEA;
    background-image:url(bottom_back.png);
}
Run Code Online (Sandbox Code Playgroud)

<div class="gallery_image_container">
<img src="image.png" />
</div>
Run Code Online (Sandbox Code Playgroud)

html css

0
推荐指数
1
解决办法
134
查看次数

使用data-href进行W3C验证错误

由于在使整个DIV可点击的上下文中使用data-href ="",我得到一个验证错误.JS和HTML如下.我该怎么做才能使这个W3C兼容?

JQUERY

$(function(){
$(".linked").click(function(){
window.location = $(this).attr("data-href");
return false;
});
});
Run Code Online (Sandbox Code Playgroud)

HTML

<div class="" data-href="link.html"></div>
Run Code Online (Sandbox Code Playgroud)

html jquery w3c

0
推荐指数
1
解决办法
7715
查看次数

IF语句无法正确解析

代码输出"我将前往洛杉矶.行程将是300英里的距离.我们将需要停止2次." 什么时候它应该根据我的IF语句中定义的数字拉出"停止"这个单词的复数或单数(在这种情况下,它应该是复数).由于我构建类的方式,我猜测IF不能像我预期的那样工作.任何帮助修复它将不胜感激.

class trip {

  public $destination;
  public $distance;
  public $unit;
  public $stops = null;
  public $transport = null;

  function __construct($destination, $distance, $unit, $stops, $transport) {
    $this->destination = $destination;
    $this->distance = $distance;
    $this->unit = $unit;
    $this->stops = $stops;
    $this->transport = $transport;
  }

  function getTrip() {
    $a = "I will be going to " . $this->destination . ". ";
    $a .= "The journey will be a distance of " . $this->distance . " " . $this->unit . ". ";
    $a .= …
Run Code Online (Sandbox Code Playgroud)

php

0
推荐指数
1
解决办法
42
查看次数

标签 统计

html ×2

jquery ×2

css ×1

javascript ×1

php ×1

w3c ×1