boostrap验证

最新推荐文章于 2023-12-25 13:59:59 发布

搬砖靓仔

最新推荐文章于 2023-12-25 13:59:59 发布

阅读量106

点赞数 2

分类专栏： js 文章标签： boostrp验证 boostrap js验证

本文链接：https://blog.csdn.net/qq_42726668/article/details/97375316

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>注册</title>
    <link rel="stylesheet" href="static/css/bootstrap.css"/>
    <link rel="stylesheet" href="static/css/bootstrapValidator.css"/>
    <link rel="stylesheet" href="static/css/gloab.css"/>
    <link type="text/css" rel="stylesheet" href="static/metroStyle/metroStyle.css">
    <script type="text/javascript" src="static/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="static/js/bootstrapValidator.js"></script>
    <script type="text/javascript" src="static/js/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="static/js/jquery.serializejson.js"></script>
    <script type="text/javascript" src="static/js/MultipleTreeSelect.js"></script>
</head>
<body>
<div class="container regisDiv">
    <div class="row">
        <div class="col-lg-12 colImg">
            <img class="img" src="static/img/logo.png"/>
        </div>
        <section>
            <div class="col-lg-12">
                <h3 style="margin-top:10px">用户注册</h3>
                <form id="defaultForm" onsubmit="return false;" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-lg-3 control-label"><span>*</span>用户名</label>
                        <div class="col-lg-5">
                            <input type="text" class="form-control" name="userName" placeholder="请输入登录名，包含数字、大小写字母和下划线"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label"><span>*</span>姓名</label>
                        <div class="col-lg-5">
                            <input type="text" class="form-control" name="realName"  placeholder="请输入姓名" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label"><span>*</span>邮箱</label>
                        <div class="col-lg-5">
                            <input type="text" class="form-control" name="email" placeholder="请输入邮箱"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label"><span>*</span>手机号</label>
                        <div class="col-lg-5">
                            <input type="text" class="form-control" name="mobilePhone" placeholder="请输入手机号"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label"><span>*</span>二级单位</label>
                        <div class="col-lg-5">
                            <select class="form-control" name="secondaryUnit" id="projectName" onchange="project()">
                                <option value="公司）">公司</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label">单位</label>
                        <div class="col-lg-5">
                            <input type="text" id="departmentid" name="unitRole" class="form-control form-input" placeholder="请选择编报单位权限"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label">项目</label>
                        <div class="col-lg-5" id="projectAuthority">
                            <input type="text" id="projectid" name="projectRole" class="form-control form-input" placeholder="请选择编报项目权限" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label">计划</label>
                        <div class="col-lg-5">
                            <select class="form-control" name="plan">
                                <option value=1>是</option>
                                <option value=0>否</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-9 col-lg-offset-3">
                            <button type="submit" class="btn btn-info btnButton" onclick="register()">
                                提交
                            </button>
                            <button type="button" class="btn btn-default btnButton" id="resetBtn">
                                返回
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </section>
        <!-- :form -->
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        // Generate a simple captcha
        function randomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        };
        $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

        $('#defaultForm').bootstrapValidator({
            message: 'This value is not valid',
            live: 'enabled', //验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
 6          excluded: [':disabled', ':hidden', ':not(:visible)', ':file'], //排除无需验证的控件，比如被禁用的或者被隐藏的
            //显示验证成功或者失败时的一个小图标
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            //form表单对应的字段，一定与name属性对应，要不然验证不起作用
            fields: {
                userName: {
                    message: '用户名无效',//默认提示信息
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            max: 64,
                            message: '用户名必须小于64个字'
                        },
                        //正则表达式验证
                        regexp: { 
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '用户名只能包含字母、数字和下划线组成'
                        },
                        threshold: 3,//配合下面使用只有3字符以上才发送ajax请求
                        remote: {//ajax验证。server result:{"valid",true or false} （返回前台类型）
                            url: "/c1extend/findByName",
                            message: '用户名已存在,请重新输入',
                            delay: 1000,//ajax刷新的时间是1秒一次
                            type: "GET",
                            data: function (validator) {
                                return {//给ajax的参数
                                    userName: $("userName").val()
                                }
                            }
                        },
                    }
                },
                realName: {
                    validators: {
                    //判断字段是否为空
                        notEmpty: {
                            message: '姓名不能为空'
                        },
                        //长度验证
                        stringLength: {
                        	min:3
                            max: 64,
                            message: '姓名必须小于64个字大于3个字'
                        },
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空'
                        },
                        //邮箱验证
                        emailAddress: {
                            message: '输入不是有效的电子邮件地址'
                        }
                    }
                },
                mobilePhone: {
                    validators: {
                        notEmpty: {
                            message: '手机号不能为空'
                        },
                        stringLength: {
                            min: 10,
                            message: '手机号必须大于10个字'
                        },
                    }
                },
                secondaryUnit:{
                    validators: {
                        notEmpty: {
                            message: '二级不能为空'
                        }
                    }
                }
            }
        });

        // Validate the form manually
        $('#validateBtn').click(function() {
            $('#defaultForm').bootstrapValidator('validate');
        });

        $('#resetBtn').click(function() {
            $('#defaultForm').data('bootstrapValidator').resetForm(true);
        });
    });

</script>

另外再提供一些上文没用到的的验证

大小写验证

stringCase: {
          message: '必须只包含大写字符。',
          case: 'upper'//其他值或不填表示只能小写字符
                    },

两个字段不相同的判断

different: {
          field: 'password',
          message: '用户名和密码不能相同。'
                    }

日期格式验证

date: {
         format: 'YYYY/MM/DD',
         message: '日期无效'
                    }

纯数字验证

 digits: {
         message: '该值只能包含数字。'
                    }

复选框验证

choice: {
                        min: 1,
                        max: 3,
                        message: '请选择1-3项'
                    }

密码确认

identical: {
                        field: 'confirmPassword',
                        message: 'The password and its confirm are not the same'
                    },

判断输入数字是否符合大于1小于0

greaterThan: {
                        value: 1
                    },
lessThan: {
                        value: 0
                    }

uri验证

 uri: {}

remote远程校验注意点：
调用ajax后台的程序要求返回
{“valid”,false}表示不可用
{“valid”,true}表示可用

搬砖靓仔

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
boostrap验证

<head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>注册</title> <link rel="stylesheet" href="static/cs...
复制链接

扫一扫

专栏目录