表单验证——JqueryValidator、BootstrapValidator

表单验证两种方式：

1、JqueryValidator

<!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>

2、BootstrapValidator

<!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>

几点区别：

1、BootstrapValidator因为使用到了bootstrap定义的样式，美观程度上略胜一筹；

2、BootstrapValidator默认支持正则表达式，可根据业务逻辑设计自定义的正则表达式，而jqueryValidator默认不支持正则，需要手动添加addMethod("regex",xxx);见http://stackoverflow.com/questions/280759/jquery-validate-how-to-add-a-rule-for-regular-expression-validation

3、其他方面，如添加验证规则的语法上，两者基本一样，可以在html中设置属性，也可以在js中设置。

巴特西

表单验证——JqueryValidator、BootstrapValidator

最新文章

热门文章