verJs表单验证特效插件

verJs表单验证特效插件

jQuery基于verJs表单验证提示插件制作密码、最小/大值、最小/大长度、手机、邮箱、身份证、气泡+正则等按钮提交表单验证代码。

使用方法
在页面引入verJs.min.js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="verJs/verJs.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
function max_width() {
        var max = 0;
        $("dt").each(function () {
            max = Math.max(max,$(this).width());
        });
        $("dt").width(max);
    }
    max_width();
    new VerJs({
        form:"#form",
        success:function (d) {
            alert(1)
        },
        fail:function (d) {
            alert(2)
        }
    });

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<form action="#" id="form" data-form="ajax">
    <fieldset>
        <div>form表单验证</div>
        <dl>
            <dt>必填</dt>
            <dd>
                <input type="text" data-required="参数不能为空" id="eq">
            </dd>
        </dl>
        <dl>
            <dt>相等</dt>
            <dd>
                <input type="text" data-equal="#eq" data-required="参数不能为空">
            </dd>
        </dl>
        <dl>
            <dt>最小/大值</dt>
            <dd>
                <input type="number" data-min="7" data-max="15">
            </dd>
        </dl>
        <dl>
            <dt>最小/大长度</dt>
            <dd>
                <input type="text" data-minlength="5" data-maxlength="15">
            </dd>
        </dl>
        <dl>
            <dt>手机</dt>
            <dd>
                <input type="text" data-mobile="true">
            </dd>
        </dl>
        <dl>
            <dt>邮箱</dt>
            <dd>
                <input type="text" data-email="true">
            </dd>
        </dl>
        <dl>
            <dt>身份证</dt>
            <dd>
                <input type="text" data-idcard="true">
            </dd>
        </dl>
        <dl>
            <dt>气泡+正则</dt>
            <dd>
                <input type="text" data-rule="^[A-Za-z]w{5,11}$" data-rule-message="请输入6~12字符,以字母开头" data-required="请输入6~12字符,以字母开头" data-block="true">
            </dd>
        </dl>

        <button type="submit">提交</button>
    </fieldset>
</form>
当前内容只有登录了才能查看,如果您已经注册,请登录
2

发表评论