源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JS组件Form表单验证神器BootstrapValidator

  • 时间:2020-09-19 01:15 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JS组件Form表单验证神器BootstrapValidator
本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 [b]1、初级用法 [/b]来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它至少需要jQuery、bootstrap的支持。我们首先引入需要的js组件:
 <script src="~/Scripts/jquery-1.10.2.js"></script>

 <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
 <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

 <script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script>
 <link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />

我们知道,既然是表单验证,那么我们在cshtml页面就必须要有一个Form,并且我们知道Form里面取元素都是通过name属性去取值的,所以,表单里面的元素都要有一个name的属性值。
 <form>
  <div class="form-group">
  <label>Username</label>
  <input type="text" class="form-control" name="username" />
  </div>
  <div class="form-group">
  <label>Email address</label>
  <input type="text" class="form-control" name="email" />
  </div>
  <div class="form-group">
  <button type="submit" name="submit" class="btn btn-primary">Submit</button>
  </div>
 </form>
有了表单元素之后,就是我们的js初始化了。
 $(function () {
 $('form').bootstrapValidator({
        message: 'This value is not valid',
   feedbackIcons: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
           },
  fields: {
  username: {
   message: '用户名验证失败',
   validators: {
   notEmpty: {
    message: '用户名不能为空'
   }
   }
  },
  email: {
   validators: {
   notEmpty: {
    message: '邮箱地址不能为空'
   }
   }
  }
  }
 });
 });
内容应该很容易看懂。来看效果: 验证通不过,提交按钮灰掉不能点击 [img]http://files.jb51.net/file_images/article/201601/201612691902999.png?201602691910[/img] 验证通过,提交按钮恢复 [img]http://files.jb51.net/file_images/article/201601/201612691917999.png?201602691926[/img] 看看效果先感受下,最大优点:使用简单,界面友好。下面我们来看看重叠验证。 [b]2、中级用法[/b] 上面我们知道了非空验证的写法,除此之外肯定还有其他验证方式啊。别急,我们慢慢来看。上面的代码cshtml部分不动,js部分我们稍作修改:
 $(function () {
 $('form').bootstrapValidator({
  message: 'This value is not valid',
  feedbackIcons: {
  valid: 'glyphicon glyphicon-ok',
  invalid: 'glyphicon glyphicon-remove',
  validating: 'glyphicon glyphicon-refresh'
  },
  fields: {
  username: {
   message: '用户名验证失败',
   validators: {
   notEmpty: {
    message: '用户名不能为空'
   },
   stringLength: {
    min: 6,
    max: 18,
    message: '用户名长度必须在6到18位之间'
   },
   regexp: {
    regexp: /^[a-zA-Z0-9_]+$/,
    message: '用户名只能包含大写、小写、数字和下划线'
   }
   }
  },
  email: {
   validators: {
   notEmpty: {
    message: '邮箱不能为空'
   },
   emailAddress: {
    message: '邮箱地址格式有误'
   }
   }
  }
  }
 });
 });
加上了重叠验证我们来看效果: [img]http://files.jb51.net/file_images/article/201601/201612691951161.png?201602691959[/img] [img]http://files.jb51.net/file_images/article/201601/201612692006300.png?201602692013[/img] [img]http://files.jb51.net/file_images/article/201601/201612692020346.png?201602692027[/img] 由上面的代码可以看出在validators属性对应一个Json对象,里面可以包含多个验证的类型: [list] [*][b]notEmpty:非空验证;[/b][/*] [*][b]stringLength:字符串长度验证;[/b][/*] [*][b]regexp:正则表达式验证;[/b][/*] [*][b]emailAddress:邮箱地址验证(都不用我们去写邮箱的正则了~~)[/b][/*] [/list] 除此之外,在文档里面我们看到它总共有46个验证类型,我们抽几个常见的出来看看: [list] [*][b]base64:64位编码验证;[/b][/*] [*][b]between:验证输入值必须在某一个范围值以内,比如大于10小于100;[/b][/*] [*][b]creditCard:身份证验证;[/b][/*] [*][b]date:日期验证;[/b][/*] [*][b]ip:IP地址验证;[/b][/*] [*][b]numeric:数值验证;[/b][/*] [*][b]phone:电话号码验证;[/b][/*] [*][b]uri:url验证;[/b][/*] [/list] 还有一个比较常用的就是submitHandler属性,它对应着提交按钮的事件方法。使用如下:
$(function () {
 $('form').bootstrapValidator({
  message: 'This value is not valid',
  feedbackIcons: {
  valid: 'glyphicon glyphicon-ok',
  invalid: 'glyphicon glyphicon-remove',
  validating: 'glyphicon glyphicon-refresh'
  },
  fields: {
  username: {
   message: '用户名验证失败',
   validators: {
   notEmpty: {
    message: '用户名不能为空'
   },
   stringLength: {
    min: 6,
    max: 18,
    message: '用户名长度必须在6到18位之间'
   },
   regexp: {
    regexp: /^[a-zA-Z0-9_]+$/,
    message: '用户名只能包含大写、小写、数字和下划线'
   }
   }
  },
  email: {
   validators: {
   notEmpty: {
    message: '邮箱不能为空'
   },
   emailAddress: {
    message: '邮箱地址格式有误'
   }
   }
  }
  },
  submitHandler: function (validator, form, submitButton) {
  alert("submit");
  }
 });
 });
在它的Demo里面介绍了很多验证的实例。我们简单看看它的效果,至于实现代码,其实很简单,有兴趣的可以直接看api。 颜色验证 [img]http://files.jb51.net/file_images/article/201601/201612692118034.png?201602692126[/img] Tab页表单验证 [img]http://files.jb51.net/file_images/article/201601/201612692136469.png?201602692150[/img] 按钮验证 [img]http://files.jb51.net/file_images/article/201601/201612692156110.png?20160269225[/img] 如果大家还想深入学习,可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习,再为大家附两个精彩的专题:[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url]  以上就是关于本文的全部内容,希望对大家的学习有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部