quick.js jquery表单验证插件


quick.js jquery表单验证插件,通过dom设置属性来进行验证

 data-required="true" data-email="true"

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["quick"], function() {
                $("#save").click(function() {
                    alert($("form").validate()); return false;
                });
            });
        });
    </script>
</head>
<body>
    <header>
    </header>
    <div id="main">
        <form>
            <div>
                <label for="name">Name</label>
                <div>
                    <input type="text" id="name" placeholder="Name" data-required="true">
                    <span class="help-inline"></span>
                </div>
            </div>
            <div>
                <label for="username">Username</label>
                <div>
                    <input type="text" id="username" placeholder="Username" data-required="true">
                    <span class="help-inline"></span>
                </div>
            </div>
            <div>
                <label for="email">Email</label>
                <div>
                    <input type="text" id="email" placeholder="Email" data-required="true" data-email="true">
                    <span class="help-inline"></span>
                </div>
            </div>
            <div>
                <label for="password">Password</label>
                <div>
                    <input type="password" id="password" placeholder="Password" data-required="true" data-password="true">
                    <span class="help-inline"></span>
                </div>
            </div>
            <div>
                <label for="cpassword">Confirm</label>
                <div>
                    <input type="password" id="cpassword" placeholder="Password" data-required="true" data-match="true" data-matchwith="password">
                    <span class="help-inline"></span>
                </div>
            </div>
            <div>
                <label for="type">Type</label>
                <div>
                    <select id="type" data-required="true">
                        <option value="1">Supervisor</option>
                        <option value="2">Engineer</option>
                    </select>
                    <span class="help-inline"></span>
                </div>
            </div>
            <div>
                <button id='save'>Save</button>
            </div>
        </form>
    </div>
    <footer id="footer">
    </footer>
</body>
</html>


官网:https://github.com/KhodorAmmar/QuickValidation

立即下载quick.js查看所有js插件

网友评论0

程序员在线工具箱