表单验证-Validform中验证ip是否存在

最新推荐文章于 2023-01-07 11:16:42 发布

原创最新推荐文章于 2023-01-07 11:16:42 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

前端学习专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在Validform表单验证中实现自定义规则，检查输入的IP地址是否真实存在。通过设置`datatype`为自定义的`ipValid`规则，并在JavaScript中编写验证逻辑，利用AJAX向后端请求验证IP，根据返回结果决定验证成功或失败。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html：

<form id="formobj">
    <input id="hostIp" name="hostIp" type="text" errormsg="ip不存在" datatype="ipValid" />
    <span class="Validform_checktip"></span>
</form>

errormsg是在验证返回false的时候显示的提示信息
datatype是验证规则，这里的ipValid是自定义的验证规则，平时可以写正则

js:

$('#formobj').Validform({
    tiptype:2,
    datatype:{
        "ipValid":function(gets,obj,curform,regxp){
                regxp = new RegExp("^((25[0-5]|2[0-4]\\d|[01]?\\d\\d?)($|(?!\.$)\.)){4}$");
                if(!regxp.test(gets)) {
                    return "ip地址格式错误"; 
                }
                var result;
                $.ajax({
                    url: "cloudVmController/getHostInfo.do?privateIps="+gets,
                    contentType: "application/json;charset=utf-8",
                    type: "post",
                    dataType: "json",
                    success: function(r) {
                        if(!r.success){
                            result = false;
                        }else{
                            result = true;
                        }

                    }
                });
                return result;
            }
        }
    });

gets表示该input框输入的值（相当于$(“#hostIp”).val()）
obj表示当前input框
curform表示当前表单（本例为formobj）
regxp表示正则表达式
return false表示验证失败 return true表示验证通过
ajax中success部分的方法要根据后端返回的result来解析