bootstrapValidator表单验证插件学习

Bootstrap 2019-01-06

本文实例为大家分享了bootstrapValidator表单验证的具体代码，供大家参考，具体内容如下

1.页面引入css、js

rush:xhtml;"> vendor/bootstrap/css/bootstrap.css"/> dist/css/bootstrapValidator.css"/>

<script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js">
<script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js">
<script type="text/javascript" src="../dist/js/bootstrapValidator.js">

2.页面表单

rush:xhtml;">
用户名 
<div class="form-group"&gt; 
<label for="email" class="col-sm-2 control-label"&gt;Email</label> 
<div class="col-sm-10"&gt; 
 <input type="text" class="form-control" id="email" name="email"&gt; 
</div> 
</div> 
<div class="form-group"&gt; 
<label for="alias" class="col-sm-2 control-label"&gt;别名</label> 
<div class="col-sm-10"&gt; 
 <input type="text" class="form-control" id="alias" name="alias"&gt; 
</div> 
</div> 

<div class="form-group"&gt; 
<label for="personId" class="col-sm-2 control-label"&gt;隶属人员</label> 
<div class="col-sm-4"&gt; 
 <input type="text" class="form-control" id="personId" name="personId"&gt; 
</div> 
<label for="enabled" class="col-sm-2 control-label"&gt;是否可用</label> 
<div class="col-sm-4"&gt; 
 <input type="radio" name="enabled" value="true" checked>是 
 <input type="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" name="enabled" value="false"&gt;否 
</div> 
</div> 

<div class="form-group"&gt; 
<label for="accountExpired" class="col-sm-3 control-label"&gt;账号是否过期</label> 
<div class="col-sm-2"&gt; 
 <input type="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" name="accountExpired" value="true"&gt;是 
 <input type="radio" name="accountExpired" value="false" checked>否 
</div> 
<label for="accountLocked" class="col-sm-3 control-label"&gt;账号是否锁定</label> 
<div class="col-sm-2"&gt; 
 <input type="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" name="accountLocked" value="true"&gt;是 
 <input type="radio" name="accountLocked" value="false" checked>否 
</div> 
</div> 


<div class="form-group"&gt; 
<label for="credentialsExpired" class="col-sm-3 control-label"&gt;密码是否过期</label> 
<div class="col-sm-2"&gt; 
 <input type="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" name="credentialsExpired" value="true"&gt;是 
 <input type="radio" name="credentialsExpired" value="false" checked>否 
</div> 
<label for="superAdmin" class="col-sm-3 control-label"&gt;是否超级<a href="https://www.jb51.cc/tag/guanliyuan/" target="_blank" class="keywords">管理员</a></label> 
<div class="col-sm-2"&gt; 
 <input type="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" name="superAdmin" value="true"&gt;是 
 <input type="radio" name="superAdmin" value="false" checked>否 
</div> 
</div> 

<div class="form-group"&gt; 
<label for="memo" class="col-sm-2 control-label"&gt;备注</label> 
<div class="col-sm-10"&gt; 
 <textarea cols="80" rows="3" class="form-control" id="memo" name="memo"&gt;</textarea> 
</div> 
</div>

<div style="width: 250px; margin: 20px auto;">

3.js初始化验证

rush:js;"> //验证表单 var validatorForm = { //验证规则 validatorReuls:function(){ $("#detailForm").bootstrapValidator({ FeedbackIcons: { valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh' },fields: { userName:{ validators: { notEmpty: { message: '用户名不能为空' },remote: {////ajax验证。服务器端返回的 result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true} url: contextpath+"/sysUser/username",type:"GET",data: function(validator) { var x_={ userName: validator.getFieldElements('userName').val() }; return x_; },message: '用户名已注册，请重新输入' } } 
  },email: { 
   validators: { 
    notEmpty: { 
     message: '邮箱不能为空' 
    },regexp: {//正则表达式 
     regexp: Regex.email,message: '邮箱地址格式不正确' 
    } 
   } 
  },userPassword: { 
   validators: { 
    notEmpty: { 
     message: '密码不能为空' 
    },regexp: { 
     regexp: Regex.password_6_18,message: '密码只能输入6-18个字母、数字、下划线 ' 
    } 
   } 
  } 
 } 
});

},//验证表单
validate: function(formId){
$('#'+formId).data('bootstrapValidator').validate();
},//验证表单是否通过验证
isValid : function(formId){
return $('#'+formId).data('bootstrapValidator').isValid()
},//清空表单验证
clearValidate : function(formId){
$('#'+formId).bootstrapValidator('resetForm');
}
}

4.最后呈现的效果

bootstrapValidator官网：nofollow" target="_blank" href="http://bv.doc.javake.cn/">bootstapValidator

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

bootstrapbootstrapValidator表单验证

相关文章

Bootstrip HTML 查询搜索常用格式模版
Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...
如何在按钮上加红色数字
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
让两个按钮左右排列
要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它...
status能否设置为布尔值类型，前端采用复选框形式
是的，可以将status设置为布尔类型，这样可以在前端使用复选...
Bootstrap 按钮总结
前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自...
Python学习-day52-bootstrap
起步导入：<linkrel="stylesheet"href="b...