bootstrapValidator表单验证插件学习

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

1.页面引入css、js

2.页面表单

 
  
   
    
    × 
     
    
系统用户信息 
    
    
    
    
   

3.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官网：bootstapValidator

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