HTML表单IP地址验证

Question

I am looking to validate IP addresses on a webpage using jQuery. There are two small updates I would like some help with.

1. How can I get the Valid IP and Invalid IP to appear when the page loads, not just when the text box is edited.
2. how can I style the text so that Valid IP appears in green and Invalid IP appears in red?

I have created a JS Fiddle of my work so far .

Answer 1

1. How can I get the Valid IP and Invalid IP to appear when the page loads, not just when the text box is edited.

You can wait until the dom-tree is loaded and then fetch the ip and perform the validation:

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

Where your validateIpAddress method changes the text according to whether the pattern is valid or not:

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

2. how can I style the text so that Valid IP appears in green and Invalid IP appears in red?

Create a CSS file which contain classes like

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

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

Then you can simply add the classes with 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

For question 2:

Create a class valid and a class invalid, add the class with jquery by doing this:

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

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

in the style define:

.valid{
  border:thin solid green;
}

.invalid{
  border:thin solid red;
}

Answer 3

I hope this can help.

I modified your fiddle

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

Just look on the fiddle for the whole code.

Happy Coding :D