bootstrapvalidator中文文档_bootstrapValidator表单验证插件详解

更新时间:2020-12-19    来源:js教程    手机版     字体:

【www.bbyears.com--js教程】

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

1.页面引入css、js

   代码如下       <scripttype="text/javascript"src="../vendor/jquery/jquery-1.10.2.min.js"></script>  <scripttype="text/javascript"src="../vendor/bootstrap/js/bootstrap.min.js"></script>  <scripttype="text/javascript"src="../dist/js/bootstrapValidator.js"></script>  

2.页面表单

   代码如下              ×          系统用户信息                           用户名                               word"class="col-sm-2 control-label">密码           word"class="form-control"id="userPassword"name="userPassword">                           Email                               别名                                      隶属人员                     是否可用           是      否                           账号是否过期           是      否          账号是否锁定           是      否                                  密码是否过期           是      否          是否超级管理员           是      否                           备注                              保存     重置     取消                

3.js初始化验证

   代码如下 //验证表单  varvalidatorForm = {    //验证规则    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) {            varx_={             userName: validator.getFieldElements("userName").val()            };            returnx_;           },           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.最后呈现的效果

本文来源:http://www.bbyears.com/wangyezhizuo/117493.html

热门标签

更多>>

本类排行