Jquery+原生JavaScript验证IP地址是否合法

Jquery+原生JavaScript验证IP地址是否合法

本文展示了一个利用正则表达式对IP地址进行判空和格式检查的JS函数,适用于各式包含IP地址并需要对其进行验证的前端提交表单。同样也适用于检测子网掩码或默认网关是否合法。

function ValidIP(item) {
    var str = item.val();  // item:jquery控件对象对象,可在使用此函数时传入 $("<控件标识>") 进行使用
    var name = item.attr("name");  // 获取控件的name属性,用以抛出未捕获异常
    var flag;  // 验证ip地址是否合法的标志变量
    let voidChar = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/g;  // 验证ip地址的正则表达式
    if (str !== null && str !== "") {
        if (!voidChar.test(str)) {  // 测试ip地址字符串是否合法 
            flag = true;
        } else {
            flag = false;
        }
    } else {
        alert("You must enter an valid IP address!");  // ip地址字符串为空
        throw new Error("Required items: IP address (" + name + ")!");  // 原生js抛出自定义异常的方法,抛出异常后,程序将中断执行,保证表单不被提交
    }
    if (flag) {
        alert("Invalid IP address format");  // ip地址不合法
        throw new Error("Invalid IP address format(" + name + ")");
    }
}
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
下拉树是一种常见的树形选择控件,可以在下拉框中展示树形结构,用户可以通过下拉框选择树形节点。在实现下拉树时,可以使用ejs模板引擎、jQuery库、JavaScript和原生HTML Select元素。 首先,在HTML文件中创建一个下拉框,并给该下拉框设置id,如下所示: ```html <select id="tree-select"></select> ``` 接下来,使用ejs模板引擎创建下拉树节点的模板,如下所示: ```ejs <% function renderTree(data) { %> <% for (var i = 0; i < data.length; i++) { %> <option value="<%= data[i].id %>"><%= data[i].name %></option> <% if (data[i].children && data[i].children.length > 0) { %> <% renderTree(data[i].children); %> <% } %> <% } %> <% } %> ``` 该模板使用递归方式,遍历树形结构的每个节点,并将节点渲染成下拉框的一个选项。 接下来,使用jQuery库来获取下拉框,并在下拉框中渲染树形结构。具体实现如下所示: ```javascript $(function() { // 模拟树形结构数据 var treeData = [ { id: 1, name: '节点1', children: [ { id: 2, name: '节点1-1', children: [ { id: 3, name: '节点1-1-1' }, { id: 4, name: '节点1-1-2' } ] }, { id: 5, name: '节点1-2' } ] }, { id: 6, name: '节点2' } ]; // 获取下拉框元素 var $select = $('#tree-select'); // 渲染树形结构到下拉框中 renderTree(treeData, $select); // 定义渲染树形结构的函数 function renderTree(data, $select) { var html = ''; for (var i = 0; i < data.length; i++) { html += '<option value="' + data[i].id + '">' + data[i].name + '</option>'; if (data[i].children && data[i].children.length > 0) { renderTree(data[i].children, $select); } } $select.append(html); } }); ``` 上述代码首先定义了一个模拟的树形结构数据,然后获取下拉框元素,并调用渲染树形结构的函数将树形结构渲染到下拉框中。渲染函数中使用了递归方式来遍历树形结构的每个节点,并将节点渲染成下拉框的一个选项。 最后,将上述代码保存为HTML文件并在浏览器中打开该文件,即可看到渲染出来的下拉树。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

胖作家

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值