zoukankan      html  css  js  c++  java
  • jquery中用bootstrap中的表单验证及提交

    Bootstrap:bootstrapValidator表单自定义验证

    实例:

    <%@ page contentType="text/html;charset=UTF-8" language="java"%>
    <!DOCTYPE html>
    <html>
    <head>
    <title>11</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link type="text/css" rel="stylesheet" href="static/vendors/bootstrapvalidator/css/bootstrapValidator.css">
        <link type="text/css" rel="stylesheet" href="static/vendors/bootstrap/css/bootstrap.css">
    </head>
    <body>
    <div class="container">
        <br>
            <form class="form-horizontal" role="form" id="form-test">
                <div class="form-group">
                    <label for="username" class="col-sm-1 control-label">姓名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="username" name="username" placeholder="请输入姓名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-1 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
                    </div>
                </div>
                <div class="form-group">
                    <label for="repassword" class="col-sm-1 control-label">确认密码</label>
                    <div class="col-sm-10">
                        <input type="repassword" class="form-control" id="repassword" name="repassword" placeholder="请输入确认密码">
                    </div>
                </div>
                <div class="form-group">
                    <label for="email" class="col-sm-1 control-label">邮箱</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-1 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox">请记住我
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-1 col-sm-10">
                        <button type="submit" class="btn btn-default" id="btn-test">登录</button>
                    </div>
                </div>
            </form>
    </div>
    </body>
    <script src="static/vendors/jquery/js/jquery.min.js"></script>
    <script src="static/vendors/bootstrapvalidator/js/bootstrapValidator.js"></script>
    <script src="static/vendors/bootstrap/js/bootstrap.js"></script>
    <script>
        $(function () {
            $("#form-test").bootstrapValidator({
                live: 'enabled',//验证时机,enabled是内容有变化就验证(默认),disabled和submitted是提交再验证
                excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件,比如被禁用的或者被隐藏的
                submitButtons: '#btn-test',//指定提交按钮,如果验证失败则变成disabled,但我没试成功,反而加了这句话非submit按钮也会提交到action指定页面
                message: '通用的验证失败消息',//好像从来没出现过
                feedbackIcons: {//根据验证结果显示的各种图标
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    email: {
                        validators: {
                            emailAddress: {//验证email地址
                                message: '不是正确的email地址'
                            },
                            notEmpty: {//检测非空
                                message: '请输入邮箱'
                            },
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {//检测非空
                                message: '请输入密码'
                            },
                        }
                    },
                    repassword: {
                        validators: {
                            notEmpty: {//检测非空
                                message: '请输入确认密码'
                            },
                            identical: {//与指定控件内容比较是否相同,比如两次密码不一致
                                field: 'password',//指定控件name
                                message: '两次输入的密码不同'
                            },
                        }
                    },
                    username: {
                        validators: {
                            notEmpty: {//检测非空,radio也可用
                                message: '请输入用户名'
                            },
                            stringLength: {//检测长度
                                min: 3,
                                max: 10,
                                message: '长度必须在3-10之间'
                            },
                            regexp: {//正则验证
                                regexp: /^[a-zA-Z0-9_.]+$/,
                                message: '所输入的字符不符要求'
                            },
                        }
                    }
                }
            });
     
            function showToast(msg,shortCutFunction)
            {
                toastr.options = {
                    "closeButton": true,
                    "debug": false,
                    "progressBar": true,
                    "positionClass": "toast-bottom-right",
                    "onclick": null,
                    "showDuration": "400",
                    "hideDuration": "1000",
                    "timeOut": "7000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                }
                toastr[shortCutFunction](msg,"提示");
            }
     
            $("#btn-test").click(function () {//非submit按钮点击后进行验证,如果是submit则无需此句直接验证
                $("#form-test").bootstrapValidator('validate');//提交验证
                if ($("#form-test").data('bootstrapValidator').isValid()) {//获取验证结果,如果成功,执行下面代码
                    showToast("2345678","error");
                    alert("yes");//验证成功后的操作,如ajax
                }
            });
        });
    </script>
        $('#forms').bootstrapValidator({
            // excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件,比如被禁用的或者被隐藏的
            message: '通用的验证失败消息',//好像从来没出现过
            feedbackIcons: {//根据验证结果显示的各种图标
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                licName: {
                    validators: {
                        regexp: {//正则验证
                            regexp: /^[u4E00-u9FA5]{2,5}[0-9]{8}$/,      // 表示2-5个汉子加8位数字

    '请输如查桂峰10035608,您输入有误!' }, notEmpty: {//检测非空 message: '请输入申请人' }, } }, } })
  • 相关阅读:
    2017ccpc全国邀请赛(湖南湘潭) E. Partial Sum
    Codeforces Round #412 C. Success Rate (rated, Div. 2, base on VK Cup 2017 Round 3)
    2017 中国大学生程序设计竞赛 女生专场 Building Shops (hdu6024)
    51nod 1084 矩阵取数问题 V2
    Power收集
    红色的幻想乡
    Koishi Loves Segments
    Wood Processing
    整数对
    Room and Moor
  • 原文地址:https://www.cnblogs.com/wsm777/p/14115331.html
Copyright © 2011-2022 走看看