zoukankan      html  css  js  c++  java
  • 表单验证——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>
    View Code

    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>
    View Code

    几点区别:

    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中设置。

  • 相关阅读:
    online ddl与pt-osc详解
    几个重点问题回顾
    死锁及常见死锁模型
    InnoDB中锁的算法(3)
    一个幻读模型引出的记录可见性判断
    jupyter notebook的使用
    l线程池抓取lianjia
    lagou数据爬取
    爬虫代理的设置
    linux如何安装和启动mongdb
  • 原文地址:https://www.cnblogs.com/Being-a-runner-up/p/5729974.html
Copyright © 2011-2022 走看看