Question

我希望使用jQuery在网页上验证IP地址。我想要一些帮助，有两个小的更新。

如何才能显示Valid IP和Invalid IP 页面加载，而不仅仅是在编辑文本框时。
如何设置文字样式，以便Valid IP以绿色显示Invalid IP 出现在红色？

Answer 1

如何在页面加载时显示有效IP和无效IP，而不仅仅是在编辑文本框时。

您可以等到加载dom-tree然后获取ip并执行验证：

$(document).on("ready", function()
{
    var ip = getIp(); // The way you implement it.
    validateIpAddress(ip);
});

您的validateIpAddress方法根据模式是否有效来更改文本：

if (!pattern.test(ip))
{
    $('#validate_ip').text('Not Valid IP');
}
else
{
    $('#validate_ip').text('Valid IP');
}

如何设置文本样式，使有效IP显示为绿色，无效IP显示为红色？

创建一个包含类似

的类的CSS文件

.valid
{
    color: #00ff00; /* green */
}

.invalid
{
    color: #ff0000; /* red */
}

然后你可以简单地用jQuery添加类：

if (!pattern.test(ip))
{
    $('#validate_ip').text('Not Valid IP');
    $('#validate_ip').addClass('valid');
}
else
{
    $('#validate_ip').text('Valid IP');
    $('#validate_ip').addClass('invalid');
}

Answer 2

问题2：

创建一个有效的类和一个类无效，通过这样做添加带有jquery的类：

$('.sn').addClass('valid');

$('.sn').addClass('invalid');

样式中的

定义：

.valid{
  border:thin solid green;
}

.invalid{
  border:thin solid red;
}

Answer 3

我希望这可以提供帮助。

我修改了你的小提琴

http://jsfiddle.net/r5aeus62/9/

$(document).ready(function() {
  var pattern = /\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/;
  x = 46;

  var ip = $('.ip').val();
  var sn = $('.sn').val();
  var br = $('.br').val();
  var nt = $('.nt').val();
  var gw = $('.gw').val();

  if (!pattern.test(ip)) {
     $('#validate_ip').text('Invalid IP');
     $('#validate_ip').addClass('invalid');
  } else {
     $('#validate_ip').text('Valid IP');
     $('#validate_ip').removeClass().addClass('valid');
  }

  if (!pattern.test(sn)) {
     $('#validate_sn').text('Invalid IP');
     $('#validate_sn').removeClass().addClass('invalid');
  } else {
     $('#validate_sn').text('Valid IP');
     $('#validate_sn').removeClass().addClass('valid');
  }

  if (!pattern.test(br)) {
     $('#validate_br').text('Invalid IP');
     $('#validate_br').addClass('invalid');
  } else {
     $('#validate_br').text('Valid IP');
     $('#validate_br').removeClass().addClass('valid');
  }

  if (!pattern.test(nt)) {
     $('#validate_nt').text('Invalid IP');
     $('#validate_ip').removeClass().addClass('invalid');
  } else {
     $('#validate_nt').text('Valid IP');
     $('#validate_nt').removeClass().addClass('valid');
  }

  if (!pattern.test(gw)) {
     $('#validate_gw').text('Invalid IP');
     $('#validate_gw').removeClass().addClass('invalid');
  } else {
     $('#validate_gw').text('Valid IP');
     $('#validate_gw').removeClass().addClass('valid');
}

只需查看整个代码的小提琴。

快乐编码：D

HTML表单IP地址验证

3 个答案: