做Web开发的我们,表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。
来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它至少需要jQuery、bootstrap的支持。我们首先引入需要的js文件。

    <script src="js/jquery-1.10.2.js"></script>
   <script src="js/bootstrap.min.js"></script>
   <link href="css/bootstrap.min.css" rel="stylesheet" />
   <script src="js/bootstrapValidator.min.js"></script>
   <link href="css/bootstrapValidator.min.css" rel="stylesheet" />

我们知道,既然是表单验证,那么我们在html页面就必须要有一个Form,并且我们知道Form里面取元素都是通过name属性去取值的,所以,表单里面的元素都要有一个name的属性值。

     <form class="form-inline">                     
            <div class="col-sm-12">
                <div class="form-group">
                    <label for="userName" class="col-sm-2 control-label">收货人</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="name" name='name' data-tree='name' maxlength='6' />
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="form-group">
                    <label for="userName" class="col-sm-2 control-label">手机号码</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="phone" name='phone' data-tree='phone' maxlength='11' />
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="form-group">
                    <label for="userName" class="col-sm-2 control-label">固定电话</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="telephone" name='telephone' data-tree='telephone' maxlength='15' />
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="form-group">
                    <label for="userName" class="col-sm-2 control-label">邮编</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="postCode" name='postCode' maxlength='6' data-tree='postCode' />
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <button type="button" class="btn btn-primary sureAddress"> 保存</button>
            </div>
        </form>

有了表单元素之后,就是我们的js初始化了。

$('#c_compile').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        name: {
            validators: {
                notEmpty: {
                    message: '请填写您的姓名'
                }
            }
        },
        phone: {
            validators: {
                notEmpty: {
                    message: '请填写您的手机号码',
                },
                regexp: {
                    regexp: /(^1[3-9]\d{9}$)/,
                    message: '请输入正确的手机号'
                }
            }
        },
        telephone: {
            validators: {
                notEmpty: {
                    message: '请填写您的固定电话',
                },
                regexp: {
                    regexp: /^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/,
                    message: '请输入正确的固定电话'
                }
            }
        },
        postCode: {
            validators: {
                notEmpty: {
                    message: '请填写您的邮编',
                },
                regexp: {
                    regexp: /^[0-9][0-9]{5}$/,
                    message: '请输入正确的邮编'
                }
            }
        },
    }
});

效果如图:
1.png

验证通过:
2.png

Last modification:November 19, 2018
如果觉得我的文章对你有用,请随意赞赏