javascript 表单校验策略模式 strategy

* index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验&middot;策略模式</title>
    <link type="text/css" rel="stylesheet" href="./css/style.css">
</head>
<body>
<form action="post.php" id="registerForm" method="POST">
    <div class="form-group">
        <label for="userName">用户名</label>
        <input type="text" id="userName" name="userName" />
    </div>
    <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" name="password" />
    </div>
    <div class="form-group">
        <label for="phoneNumber">手机号</label>
        <input type="text" id="phoneNumber" name="phoneNumber">
    </div>
    <button type="submit" class="btn btn-sm btn-light">提交</button>
</form>
<script type="text/javascript" src="./js/index2.js"></script>
</body>
</html>

* css/style.css

.form-group {margin-bottom: 15px;  }

label {
    min-width: 4em;
    width: auto;
    text-align: right;
    display: inline-block;
}

label:after {
    content: ": ";
    display: inline-block;
}

input, button, select, optgroup, textarea {
    margin: 0;  font-family: inherit; font-size: inherit; line-height: inherit;
}

button, input {overflow: visible;}
button, select {text-transform: none; }
form {width: 400px; }
form .btn[type=submit] {margin-left: 5em; }

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-sm, .btn-group-sm > .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

.btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.btn-light:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.btn-light:focus, .btn-light.focus {
    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

.btn-light.disabled, .btn-light:disabled {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

* js/index2.js

一个文本输入框对应多种校验规则

var strategies = {
    // 不为空
    isNonEmpty: function(value, errorMsg) {
        if (value.length < 1) {
            return errorMsg;
        }
    },
    // 限制最小长度
    minLength: function(value, length, errorMsg) {
        if (value.length < length) {
            return errorMsg;
        }
    },
    // 手机号码格式
    isMobile: function(value, errorMsg) {
        if(!/^1[3|5|8][0-9]{9}$/.test(value)) {
            return errorMsg
        }
    }
};

function Validator() {
    this.cache = [];  // 保存校验规则
}

Validator.prototype.add = function(dom, rules) {
    var self = this;

    for (var i = 0, rule; rule = rules[i]; i++) {
        (function(rule) {
            var strategyAry = rule.strategy.split(':'),
                errorMsg = rule.errorMsg;

            self.cache.push(function() {
                var strategy = strategyAry.shift();
                strategyAry.unshift(dom.value);
                strategyAry.push(errorMsg);
                return strategies[ strategy ].apply(dom, strategyAry);
            });
        })(rule);
    }
};

Validator.prototype.start = function() {
    var msg = '';
    for (var i = 0, vf; vf = this.cache[i]; i++) {
        msg = vf();
        if (msg) {return msg;}
    }
    return msg;
};

var form = document.getElementById("registerForm");
form.onsubmit = function(e) {
    e.preventDefault();

    // 如果errorMsg有确切的返回值, 说明未通过校验
    var errorMsg = validateFunc();
    if (errorMsg) {
        alert(errorMsg);
        return false;
    }
    // 校验成功
    var btn = form.querySelector("button"), html = btn.innerHTML;
    btn.innerHTML = "提交中...";
    btn.classList.add("disabled");
    setTimeout(function() {
        btn.innerHTML = html;
    }, 1000);
};

var validateFunc = function() {
    // 创建一个validator对象
    var validator = new Validator();

    /**************添加一些校验规则*******************/
    validator.add(form.userName, [
        {strategy: 'isNonEmpty', errorMsg: '用户名不能为空'},
        {strategy: 'minLength:10', errorMsg: '用户名不能小于10位'}
    ]);
    validator.add(form.password, [
        {strategy: "minLength:6", errorMsg: "密码长度不能少于6位"}
    ]);
    validator.add(form.phoneNumber, [
        {strategy: "isMobile", errorMsg: "手机号码格式不正确"}
    ]);

    return validator.start();
};

* Run:

php -S localhost:8080

javascript 表单校验 策略模式 strategy

猜你喜欢

javascript 表单校验策略模式 strategy