bootstrapValidator表单验证插件学习

发布时间：2020-12-18 00:43:28 所属栏目：安全来源：网络整理

导读：本文实例为大家分享了bootstrapValidator表单验证的具体代码，供大家参考，具体内容如下 1.页面引入css、js script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js" script type="text/javascript" src="../vendor/bootstrap/js/bootst

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

1.页面引入css、js

2.页面表单

<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="radio" 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="radio" 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="radio" 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="radio" name="credentialsExpired" value="true"&gt;是 
 <input type="radio" name="credentialsExpired" value="false" checked>否 
</div> 
<label for="superAdmin" class="col-sm-3 control-label"&gt;是否超级管理员</label> 
<div class="col-sm-2"&gt; 
 <input type="radio" 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>

3.js初始化验证

  },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官网：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!