表單驗證——JqueryValidator、BootstrapValidator

時間 2019-11-17

標籤表單驗證 jqueryvalidator bootstrapvalidator 欄目 HTML 简体版

原文原文鏈接

表單驗證兩種方式：javascript

一、JqueryValidatorcss

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JqueryValidator實戰——用戶註冊</title>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

</head>
<body>
    <form id="signUpForm">
        <label for="username">username:</label>
        <br>
        <input type="text" id="username" name="username">
        <br>
        <label for="password">password:</label>
        <br>
        <input type="password" id="password" name="password">
        <br>
        <label for="confirmPassword">confirm:</label>
        <br>
        <input type="password" id="confirmPassword" name="confirmPassword">
        <br>
        <input type="submit" value="Submit" class="submit">
    </form>
    <script>
        $.validator.setDefaults({
            submitHandler: function() {
              alert("提交事件!");
            }
        });
        $().ready(function(){
            $("#signUpForm").validate({
                debug:true,
                rules:{
                    username:"required",
                    password:{
                        required: true,
                          minlength: 5
                    },
                    confirmPassword: {
                      required: true,
                      minlength: 5,
                      equalTo: "#password"
                    }
                },
                messages:{
                    username:"用戶名"
                }
            });
        });
        
    </script>
</body>
</html>

View Code

二、BootstrapValidatorhtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BootstrapValidator表單驗證Test</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="bower_components/bootstrapValidator/dist/css/bootstrapValidator.min.css"/>

    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="bower_components/bootstrapValidator/dist/js/bootstrapValidator.min.js"></script>
</head>
<body>
    <form class="registerForm col-xs-5">
        <div class="form-group">
            <label>Username</label>
            <input type="text" class="form-control" name="username" />
        </div>
        <div class="form-group">
            <label>Email address</label>
            <input type="text" class="form-control" name="email" />
        </div>
        <input type="submit" value="Submit" class="submit">
    </form>

    <script>
        $(document).ready(function() {
            $('.registerForm').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    username: {
                        message: 'The username is not valid',
                        validators: {
                            notEmpty: {
                                message: 'The username is required and cannot be empty'
                            },
                            stringLength: {
                                min: 6,
                                max: 30,
                                message: 'The username must be more than 6 and less than 30 characters long'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_]+$/,
                                message: 'The username can only consist of alphabetical, number and underscore'
                            }
                        }
                    },
                    email: {
                        validators: {
                            notEmpty: {
                                message: 'The email is required and cannot be empty'
                            },
                            emailAddress: {
                                message: 'The input is not a valid email address'
                            }
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>

View Code

幾點區別：java

一、BootstrapValidator由於使用到了bootstrap定義的樣式，美觀程度上略勝一籌；jquery

二、BootstrapValidator默認支持正則表達式，可根據業務邏輯設計自定義的正則表達式，而jqueryValidator默認不支持正則，須要手動添加addMethod("regex",xxx);見http://stackoverflow.com/questions/280759/jquery-validate-how-to-add-a-rule-for-regular-expression-validation正則表達式

三、其餘方面，如添加驗證規則的語法上，二者基本同樣，能夠在html中設置屬性，也能夠在js中設置。express

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。