首页 > 代码库 > bootstrap-3-验证表单
bootstrap-3-验证表单
js:
$(‘#nqs-add-userxinxi-form‘).bootstrapValidator({ message: ‘This value is not valid‘, excluded : [‘:disabled‘],//[‘:disabled‘, ‘:hidden‘, ‘:not(:visible)‘] //设置隐藏组件可验证 feedbackIcons: { valid: ‘glyphicon glyphicon-ok‘, invalid: ‘glyphicon glyphicon-remove‘, validating: ‘glyphicon glyphicon-refresh‘ }, fields: { uiUserName: { message: ‘姓名称验证失败‘, validators: { notEmpty: { message: ‘姓名不能为空‘ }, stringLength: { min: 32, max: 32, message: ‘姓名字数过长‘ } } }, uiSex: { message: ‘性别称验证失败‘, validators: { notEmpty: { message: ‘性别不能为空‘ } } }, uiPhone: { message:‘手机号验证失败‘, validators: { notEmpty: { message: ‘手机号不能为空‘ }, stringLength: { min: 11, max: 11, message: ‘请输入11位手机号码‘ }, regexp: { regexp: /^1[3|5|8|7]{1}[0-9]{9}$/, message: ‘请输入正确的手机号码‘ } } }, uiIdcardNumber: { message:‘身份证验证失败‘, validators: { notEmpty: { message: ‘身份证不能为空‘ }, stringLength: { min: 18, max: 18, message: ‘请输入18位身份证号码‘ }, regexp: { regexp: /^[1-9]{1}[0-9]{16}[xX1-9]{1}$/, message: ‘请输入正确的身份证号码‘ } } }, uiMail: { message:‘邮箱失败‘, validators: { notEmpty: { message: ‘邮箱不能为空‘ }, emailAddress: { message: ‘请输入正确的邮件地址如:123@qq.com‘ } } }, uiRegisterType: { message:‘认证类型失败‘, validators: { notEmpty: { message: ‘认证类型不能为空‘ } } } } });
html
<form class="form-horizontal" role="form" id="nqs-add-userxinxi-form"> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">姓名</label> <div class="col-sm-4"> <input type="text" class="form-control" id="uiUserName" name="uiUserName"placeholder=""/> </div> <label for="firstname" class="col-sm-2 control-label">姓别</label> <div class="col-sm-4 nqs-fabupingtai-ul">
<input type="text" id="uiSex" name="uiSex"/> </div> </div> <div class="form-group" id="custom_data"> <label for="firstname" class="col-sm-2 control-label">国家</label> <div class="col-sm-4"> <inputname="uiCountry" id="uiCountry" class="form-control"></input> </div> <label for="firstname" class="col-sm-2 control-label">地区</label> <div class="col-sm-4"> <input name="uiProvince" id="uiProvince" class="form-control" ></input> </div> </div> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">手机号</label> <div class="col-sm-4"> <input type="text" class="form-control" id="uiPhone" name="uiPhone"placeholder=""/> </div> <label for="firstname" class="col-sm-2 control-label">身份证</label> <div class="col-sm-4"> <input type="text" class="form-control" id="uiIdcardNumber" name="uiIdcardNumber"placeholder=""/> </div> </div> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-4"> <input type="text" class="form-control" id="uiMail" name="uiMail"placeholder=""/> </div> <label for="lastname" class="col-sm-2 control-label">认证类型</label> <div class="col-sm-4 nqs-fabupingtai-ul"> <input type="text" id="uiRegisterType" name="uiRegisterType" /> </div> </div> <div class="form-group"> <div class="col-sm-12"> <button type="button" class="btn nqs-btn-inverse" id="nqs-add-userxinxi-form-submit" >保存</button> <button type="reset" class="btn btn-default nqs-label-btn" id="nqs-add-userxinxi-form-reset" >取消</button> </div> </div> </form>
在处理html的select验证时的处理
$("#form_user_input").bootstrapValidator({ message : ‘This value is not valid‘, excluded : [‘:disabled‘],//[‘:disabled‘, ‘:hidden‘, ‘:not(:visible)‘]//设置隐藏组件可验证 feedbackIcons : { valid : ‘glyphicon glyphicon-ok‘, invalid : ‘glyphicon gluphicon-remove‘, validating : ‘glyphicon glyohicon-refresh‘ }, fields : { //这里是各种字段的验证 uiCountry: { message: ‘国家验证失败‘, validators: { notEmpty: { message: ‘未选择国家‘ } } }, uiProvince: { message: ‘地区验证失败‘, validators: { notEmpty: { message: ‘未选择地区‘ } } } } }).on(‘success.form.bv‘, function(e) { e.preventDefault();//防止表单提交 //这里可以处理ajxa提交 });
添加红色部分即可验证,原因就是默认禁用/隐藏控件不验证,这里只手动排除禁用控件,即除了禁用控件外其他控件都校验
bootstrap-3-验证表单
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。