parsley.js 表单验证js插件


parsley.js 表单验证js插件

第一步引入bfwone,加载jquery1.8以上

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery-1.9.1&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["parsley", "parsley"], function() {
                $('#demo-form').parsley().on('field:validated', function() {
                    var ok = $('.parsley-error').length === 0;
                    $('.bs-callout-info').toggleClass('hidden', !ok);
                    $('.bs-callout-warning').toggleClass('hidden', ok);
                })
                .on('form:submit', function() {
                    return false; // Don't submit form for this demo
                });
            });
        });
    </script>


</head>
<body>



    <form id="demo-form" data-parsley-validate="">
        <label for="fullname">Full Name * :</label>
        <input type="text" class="form-control" name="fullname" required="">

        <label for="email">Email * :</label>
        <input type="email" class="form-control" name="email" data-parsley-trigger="change" required="">

        <label for="contactMethod">Preferred Contact Method *:</label>
        <p>
            Email: <input type="radio" name="contactMethod" id="contactMethodEmail" value="Email" required="">
            Phone: <input type="radio" name="contactMethod" id="contactMethodPhone" value="Phone">
        </p>

        <label for="hobbies">Hobbies (Optional, but 2 minimum):</label>
        <p>
            Skiing <input type="checkbox" name="hobbies[]" id="hobby1" value="ski" data-parsley-mincheck="2"><br>
            Running <input type="checkbox" name="hobbies[]" id="hobby2" value="run"><br>
            Eating <input type="checkbox" name="hobbies[]" id="hobby3" value="eat"><br>
            Sleeping <input type="checkbox" name="hobbies[]" id="hobby4" value="sleep"><br>
            Reading <input type="checkbox" name="hobbies[]" id="hobby5" value="read"><br>
            Coding <input type="checkbox" name="hobbies[]" id="hobby6" value="code"><br>
        </p>

        <p>
            <label for="heard">Heard about us via *:</label>
            <select id="heard" required="">
                <option value="">Choose..</option>
                <option value="press">Press</option>
                <option value="net">Internet</option>
                <option value="mouth">Word of mouth</option>
                <option value="other">Other..</option>
            </select>
        </p>

        <p>
            <label for="message">Message (20 chars min, 100 max) :</label>
            <textarea id="message" class="form-control" name="message" data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-maxlength="100" data-parsley-minlength-message="Come on! You need to enter at least a 20 character comment.." data-parsley-validation-threshold="10"></textarea>
        </p>

        <br>
        <input type="submit" class="btn btn-default" value="validate">

        <p>
            <small>* Please, note that this demo form is not a perfect example of UX-awareness. The aim here is to show a quick overview of parsley-API and Parsley customizable behavior.</small>
        </p>
    </form>
</body>
</html>

官网 http://parsleyjs.org/
立即下载parsley.js查看所有js插件

网友评论0

程序员在线工具箱