JS——正则案例

验证座机号码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box">
    <input type="text"/>
    <span>请输入！</span>
</div>

<script>
    //需求：验证座机号！
    //直辖市：三位-八位（010-82935150）
    //普通市：四位-七位（0314-3160186）
    var inp = document.getElementsByTagName("input")[0];
    var span = inp.nextElementSibling || inp.nextSibling;
    inp.onblur = function () {
        var reg1 = /(^0\d{2}-8\d{7}$)|(^0\d{3}-3\d{6}$)/;
        if (reg1.test(inp.value)) {
            span.style.color = "green";
            span.innerHTML = "恭喜您，输入正确！";
        } else {
            span.style.color = "red";
            span.innerHTML = "对不起，您输入的为非法字符！";
        }
    }
</script>
</body>
</html>

验证中文账号

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box">
    <input type="text"/>
    <span>请输入！</span>
</div>
<script>
    //需求：输入名字，两位-四为。
    //原理: unicode（\u4e00-\u9fa5）编码{2,4}
    var inp = document.getElementsByTagName("input")[0];
    var span = inp.parentNode.children[1];
    inp.onblur = function () {
        //unicode（\u4e00-\u9fa5）编码{2,4}
        var reg = /^[\u4e00-\u9fa5]{2,4}$/;
        if (reg.test(this.value)) {
            span.style.color = "green";
            span.innerHTML = "恭喜您，输入正确！";
        } else {
            span.style.color = "red";
            span.innerHTML = "对不起，您输入的为非法字符！";
        }
    }
</script>
</body>
</html>

表单验证

 

posted @ 2017-12-11 16:09  var_obj  阅读(223)  评论(0)  编辑  收藏  举报