BootstrapValidator是一款基于Bootstrap的强大jQuery表单验证插件。
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<form class="form-horizontal" id="demo_form"> <div class="form-group"> <label class="col-lg-3 control-label">Username</label> <div class="col-lg-9"> <input type="text" class="form-control" name="username" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">Email address</label> <div class="col-lg-9"> <input type="text" class="form-control" name="email" /> </div> </div> </form>
说明
如果想要对字段进行验证,就必须放在 <div class="form-group"></div>内
表单元素必须要有name属性值,用来匹配字段, 比如 name="email"
1、在html标签中添加,代码如下所示:
<div class="form-group"> <label class="col-lg-3 control-label">Username</label> <div class="col-lg-5"> <input type="text" class="form-control rounded-0" id="email" name="email" required data-bv-notempty-message="自定义未填提示" placeholder="* {dr_lang('Email')}"> </div> </div>
2、添加 js 文件,代码如下:
$(function () { $(".dyui-validation").bootstrapValidator({ excluded: [":disabled"], message: '表单校验', feedbackIcons: { valid: 'bi bi-check-lg', invalid: 'bi bi-x-lg', validating: 'bi bi-arrow-repeat' }, fields: { uname:{ message: "name字段校验", trigger:"change", validators: { notEmpty: { message: '用户名不能为空' }, regexp: { regexp:/^[\u4e00-\u9fa5]+$/, message: '只能输入汉字' }, stringLength: {/*长度提示*/ max: 16, message: '用户名不能超过16个字符' } } }, mobile:{ message: "mobile字段校验", trigger:"change", validators: { notEmpty: { message: '手机号码不能为空' }, regexp: { regexp:/^1[3456789]\d{9}$/, message: '手机号码格式错误' }, } }, email: { message: "email字段校验", trigger:"change", validators: { emailAddress: { message: 'Mailbox format error' } } }, area: { message: "area字段校验", trigger:"change", validators: { notEmpty: { message: '所在地区不能为空' } } }, address: { message: "address字段校验", trigger: "change", validators: { notEmpty: { message: '详细地址不能为空' }, stringLength: {/*长度提示*/ max: 50, message: '详细地址不能超过50个字符' } } }, default: { } } }); });