kennylee-validator-js
/
src
/
html
/
demo.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Validator</title>
    <meta charset="UTF-8">

    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="javascript/validator.js"></script>

    <script>
        $(function () {
            $('#f').submit(function (e) {
                e.preventDefault();
                var _validator = new Validator({
                    message: {
                        myPwd: '无效的密码，请输入6-36个字符。',
                        required: '重定义了信息，缺少必须项！' //例子，重定义这这个表单提交时的错误信息
                    },
                    validType: {
                        myPwd: {//例子，扩展自己的验证规则
                            check: function (s) {
                                return s.length >= 6 && s.length <= 36;
                            }
                        }
                    }
                });
                var errors = _validator.checkForm(this);
                if (errors && errors['length'] && errors.length > 0) {
                    var s = '';
                    for (var i = 0, l = errors.length; i !== l; i++) {
                        var o = errors[i];
                        var _input = o.target;//出现问题的input元素
                        var _error = o.error;//错误信息
                        s += '出现问题input的name: ' + _input['name'] + '\n错误信息: ' + _error['invalidMessage'] + ' \n';
                        if (i !== l - 1) {
                            s += '-----------\n';
                        }
                    }
                    alert(s);
                }
            });
        })
    </script>

    <style type="text/css">
        .container {
            width: 300px;
            margin: 0 auto;
        }

        .container label {
            display: inline-block;
            width: 5rem;
            text-align: right;
        }
    </style>
</head>
<body>

<div class="container">
    <form action="#" id="f">
        <div><label for="loginName">登录名：</label><input id="loginName"
                                                       data-validator-options="required:true,validType:['loginName','length[6,32]']"
                                                       name="loginName"></div>
        <div><label for="phone">手机号码：</label><input id="phone" name="phone"
                                                    data-validator-options="required:true,validType:['mobile']"></div>
        <div><label for="pwd">密码：</label><input id="pwd" name="pwd"
                                                data-validator-options="required:true,validType:['myPwd']"></div>
        <div><label for="pwd2">确认密码：</label><input id="pwd2" name="pwd2"
                                                   data-validator-options="required:true,validType:['equalTo[pwd]']">
        </div>
        <button type="submit">提交</button>
    </form>
</div>

</body>
</html>