Javascript 为什么我的脚本不起作用？_Javascript_Twitter Bootstrap_Twitter Bootstrap 3

Javascript 为什么我的脚本不起作用？

javascript twitter-bootstrap twitter-bootstrap-3

Javascript 为什么我的脚本不起作用？,javascript,twitter-bootstrap,twitter-bootstrap-3,Javascript,Twitter Bootstrap,Twitter Bootstrap 3,我只是从下面给出的链接复制粘贴代码我的代码只显示HTML和CSS，但不支持任何类型的验证。验证码也在刷新页面上更改，但为什么不验证表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view

我只是从下面给出的链接复制粘贴代码

我的代码只显示HTML和CSS，但不支持任何类型的验证。验证码也在刷新页面上更改，但为什么不验证表单

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
    <link  type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/bootstrap.min.js" type="text/ecmascript"></script>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">



    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->

    <!-- Custom styles for this template -->
  </head>
<body>
<form id="contactForm" method="post" action="" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Full name</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="firstName" placeholder="First name" />
        </div>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="lastName" placeholder="Last name" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Phone number</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="phoneNumber" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Email address</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Message</label>
        <div class="col-xs-9">
            <textarea class="form-control" name="message" rows="7"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label" id="captchaOperation"></label>
        <div class="col-xs-3">
            <input type="text" class="form-control" name="captcha" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    // Generate a simple captcha
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    function generateCaptcha() {
        $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
    }

    generateCaptcha();

    $('#contactForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                firstName: {
                    row: '.col-xs-4',
                    validators: {
                        notEmpty: {
                            message: 'The first name is required'
                        }
                    }
                },
                lastName: {
                    row: '.col-xs-4',
                    validators: {
                        notEmpty: {
                            message: 'The last name is required'
                        }
                    }
                },
                phoneNumber: {
                    validators: {
                        notEmpty: {
                            message: 'The phone number is required'
                        },
                        regexp: {
                            message: 'The phone number can only contain the digits, spaces, -, (, ), + and .',
                            regexp: /^[0-9\s\-()+\.]+$/
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: 'The email address is required'
                        },
                        emailAddress: {
                            message: 'The input is not a valid email address'
                        }
                    }
                },
                message: {
                    validators: {
                        notEmpty: {
                            message: 'The message is required'
                        },
                        stringLength: {
                            max: 700,
                            message: 'The message must be less than 700 characters long'
                        }
                    }
                },
                captcha: {
                    validators: {
                        callback: {
                            message: 'Wrong answer',
                            callback: function(value, validator, $field) {
                                var items = $('#captchaOperation').html().split(' '),
                                    sum   = parseInt(items[0]) + parseInt(items[2]);
                                return value == sum;
                            }
                        }
                    }
                }
            }
        })
        .on('err.form.fv', function(e) {
            // Regenerate the captcha
            generateCaptcha();
        });
});
</script>

</body>
</html>


启动模板
全名
电话号码
电子邮件地址
消息
提交
$（文档）.ready（函数（）{
//生成一个简单的验证码
函数随机数（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1）+min）；
}
函数generateCaptcha（）{
$（'#captchaOperation'）.html（[randomNumber（1100），'+'，randomNumber（1200），'='].join（''）；
}
generateCaptcha（）；
$（“#联系方式”）
.formValidation({
框架：“bootstrap”，
图标：{
有效：“glyphicon glyphicon ok”，
无效：“glyphicon glyphicon删除”，
正在验证：“glyphicon glyphicon刷新”
},
字段：{
名字：{
行：'.col-xs-4'，
验证器：{
注意：{
消息：“第一个名字是必需的”
}
}
},
姓氏：{
行：'.col-xs-4'，
验证器：{
注意：{
消息：“姓氏是必需的”
}
}
},
电话号码：{
验证器：{
注意：{
消息：“需要电话号码”
},
regexp:{
信息：“电话号码只能包含数字、空格、、（、）、+和。”，
regexp://^[0-9\s\-（）+\.]+$/
}
}
},
电邮：{
验证器：{
注意：{
消息：“需要电子邮件地址”
},
电子邮件地址：{
消息：“输入不是有效的电子邮件地址”
}
}
},
信息：{
验证器：{
注意：{
消息：“消息是必需的”
},
弦长：{
最高：700，
消息：“消息长度必须小于700个字符”
}
}
},
验证码：{
验证器：{
回拨：{
信息：“回答错误”，
回调：函数（值，验证器，$field）{
var items=$（'#captchaOperation'）.html（）.split（''），
sum=parseInt（项目[0]）+parseInt（项目[2]）；
返回值==总和；
}
}
}
}
}
})
.on（'err.form.fv'，函数（e）{
//重新生成验证码
generateCaptcha（）；
});
});

您可能不仅缺少引导，还缺少表单验证脚本和样式表

尝试用以下行替换链接的css和js文件：

<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link  type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/ecmascript"></script>

<script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
<link rel="stylesheet" href="http://formvalidation.io/vendor/formvalidation/css/formValidation.min.css">
<script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

您可能不仅缺少引导，还缺少表单验证脚本和样式表

尝试用以下行替换链接的css和js文件：

<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link  type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/ecmascript"></script>

<script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
<link rel="stylesheet" href="http://formvalidation.io/vendor/formvalidation/css/formValidation.min.css">
<script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

您在使用formValidation插件时是否包含formValidation js？假设

bootstrap.min.js

是Twitter引导的库存版本，您还没有在任何地方包含表单验证脚本。如何包含该插件？。尝试将此作为CDN包含一次。您是否在使用formValidation插件时包含formValidation js？假设

bootstrap.min.js

是Twitter bootstrap的股票版本，您还没有在任何地方包含表单验证脚本。如何包含该插件？。尝试将此作为CDN包含一次。酷！棒极了谢谢！酷！棒极了谢谢！