zoukankan      html  css  js  c++  java
  • BootstrapValidator验证表单用法

    引入文件

    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/bootstrapValidator.min.css"/>
     
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
     
    <script type="text/javascript" src="js/bootstrapValidator.min.js"></script>
    

    html

    <form form=“testForm” role="form">
        <div class="form-group">
            <label>用户名</label>
            <input type="text" class="form-control" name="username" />
        </div>
        <div class="form-group">
            <label>Email</label>
            <input type="text" class="form-control" name="email" />
        </div>
    </form>
    

    js

        $(#testForm).bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名输入格式不正确',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '用户名在6-18字之内'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '输入数字与字母组合'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '不能为空'
                        },
                        emailAddress: {
                            message: '请输入正确的邮箱地址'
                        }
                    }
                }
            }
        });
    

    jQuery API:http://bv.doc.javake.cn/examples/

  • 相关阅读:
    PyQt4布局管理——绝对定位方式
    PyQt4 菜单栏 + 工具栏 + 状态栏 + 中心部件 生成一个文本编辑部件示例
    PyQt4工具栏
    PyQt4菜单栏
    PyQt4状态栏
    PyQt4将窗口放在屏幕中间
    PyQt4消息窗口
    PyQt4关闭窗口
    Mysql基础之 ALTER命令
    电脑开机后win系统运行异常慢,鼠标移动卡
  • 原文地址:https://www.cnblogs.com/hcrs/p/4933128.html
Copyright © 2011-2022 走看看