JS正则验证：网址

作者: 意随风起 | 来源:发表于2022-06-12 21:25 被阅读0次

JS正则验证：网址
正则初解
Yii2.0 rules验证规则大全
Yii2.0 rules验证规则大全
jQuery之正则表达式
url正则有测试用例
js 正则验证
随笔
JS正则表达式验证数字非常全
js网址正则匹配

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>验证网址</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    
    <style>
        #input1 {
            width: 500px;
        }
    </style>

    <body>
        <h4>验证网址：</h4>
        <input id="input1" type="text" placeholder="格式: https://xxx或者http://xxx, 如: https://www.baidu.com">
        &nbsp;&nbsp;
        <button id="button1" type="button" onclick="handleSearch()">验证</button>
        &nbsp;&nbsp;
        <button id="button2" type="button" onclick="clearInput()">清空</button>
        <h5 id="result1"></h5>
        <script type="text/javascript">
            
            function clearInput() {
                document.getElementById('input1').value = ''
                const result1 = document.getElementById('result1')
                result1.innerText = ''
            }
            
            function handleSearch() {
                const tempDate = document.getElementById('input1').value
                const result1 = document.getElementById('result1')
                const reg = /^(https:\/\/|http:\/\/)/
                const tip = '验证结果：'
                if (tempDate === '') {
                    result1.innerText = tip + '请输入网址'
                } else if (!reg.test(tempDate)) {
                    result1.innerText = tip + '格式错误'
                } else {
                    result1.innerText = tip + '网址合法有效'
                }
            }
            
        </script>
    </body>

</html>