js实现:'w5-8' -> /^w{5,8}$/

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现:'w5-8' -> /^w{5,8}$/</title>
<style>
body{padding: 100px;}
.abs{position: absolute;}
.rel{position: relative;}
.inp{height: 30px;line-height: 30px;text-indent: 5px;width: 200px;}
.error{color: red;left: 0;top: 40px;}
.zoom{clear: both;}
.mb40{margin-bottom: 40px;}
.btn{display: block;width: 100px;height: 40px;line-height: 40px;text-align: center;color: #fff;background-color: orange;text-decoration: none;}
</style>
</head>
<body>
    <div class="rel zoom mb40">
        <input type="text" class="inp" data-type="w5-8" data-error="请填写5-8位包括下划线的任何单词字符">
        <div class="error abs"></div>
    </div>
    <div class="rel zoom mb40">
        <input type="text" class="inp" data-type="w10-12" data-error="请填写10-12位包括下划线的任何单词字符">
        <div class="error abs"></div>
    </div>
<script src="v1.js"></script>
<script src="test.js"></script>
</body>
</html>

JS:

$(function () {

    bindW($('.inp'));

    function bindW(obj) {
        $.each(obj, function () {
            var my = $(this),
                error = my.siblings('.error'),
                type = my.data('type'),
                pattern=/^[A-Za-z]+/,//匹配到第一个字符串返回数组
                zm = type.match(pattern),//获取到第一个字母
                index1 = type.match(eval("/"+zm+"/")),//字母的index
                index2 = type.match(/(-)/),//中划线的index
                num1 = type.substring(index1.index+1,index2.index),
                num2 = type.substring(index2.index+1),
                str = '/^\'+ zm  +'{'+ num1 +','+ num2 +'}$/';

            //执行验证
            my.on({
                focus : function () {
                    error.text('');
                },
                blur : function () {
                    var val = my.val(),
                        flag = val.match(eval(str));

                    if (!flag) {
                        var errorVal = my.data('error');
                        // alert(0);
                        error.text(errorVal);
                    }
                }
            });
        });
    }
});
高否?富否?帅否? 否? 滚去学习!
原文地址:https://www.cnblogs.com/baixc/p/4622943.html