Skip to content

About

bootstrap3 validation

Resources

Stars

89 stars

Watchers

21 watching

Forks

Latest commit

 

History

33 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 

Repository files navigation

庆国庆,今年2013国庆七天假没有出行。给国家,给社区,给bootstrap3贡献一份力量。 2013-10-2

bootstrap3-validation.js author:mrlong
home: http://www.mrlong.cn

jQuery plugin for bootstrap3 由于在网上找到一个插件已不在维护了,并只支持bootstrap2 . 应项目要求自己写了一个。

preview preview preview

##ChangeLog

    1. 1.0.4 修改在textarea没有type时的错误并扩展valid()方法。 2014-6-15 巴西世界杯 英格兰1-意大利2
    1. 1.0.3 修改支持IE8,Array.indexOf() 改为 $.inArray()
    1. 1.0.2 增加基本表单与内联表单样式。
    1. 1.0.1 callback显示提示的信息。 2013-10-5
    1. 1.0.0 创建文件

##功能参数

 check-type=
    required 不能为空,并在后面自动加*号
    url  表示 输入网址
    date 日期格式 xxxx-xx-xx
    mail 邮箱
    number 数字,可以整型,浮点型。
    char 
    chinese 中文
 mail-message="扩展提示内容" , 可以扩展data-message,url-message  
 minlength="6" 表示长度大于等于6
 range="2.1~3"   表示值在[2.1~3]之间,并check-type="number"
 range="2.1,2,4,5"   表示值在只能填现数字,并check-type="number" 


 例如:
  $("form").validation(function(obj,params){
     if (obj.id=='mail'){
       $.post("/verifymail",{mail :$(obj).val()},function(data){
         params.err = !data.success;
         params.msg = data.msg;
        });
     }},
     {reqmark:false}
    );

#使用方法:

js:

<script type="text/javascript">
 $(function(){
   //1. 简单写法:
   $("form").validation();
   $("button[type='submit']").on('click',function(event){
     // 2.最后要调用 valid()方法。
     if ($("form").valid(this,"error!")==false){
       //$("#error-text").text("error!"); 1.0.4版本已将提示直接内置掉,简化前端。
       return false;
     }
   })  })
</script>

###后台数据判断,如用户邮箱是否已注册过了。

$("form").validation(function(obj,params){
     if (obj.id=='mail'){
       $.post("/verifymail",{mail :$(obj).val()},function(data){
         params.err = !data.success;
         params.msg = data.msg;
        });
     }},
     {reqmark:false}
    );

html:

  <form class="form-horizontal"  action="#" role="form">
      <div class="form-group">
        <label for="mail" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="mail" placeholder="xxxx@qq.com" check-type="mail required">
        </div>
      </div>

      <div class="form-group">
        <label for="name" class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="name" check-type="required" required-message="请填写你的大名。">
        </div>
      </div>

      <div class="form-group">
        <label for="pw1" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-6">
          <input type="password" class="form-control" id="pw1" check-type="required" minlength="6">
        </div>
      </div>

      <div class="form-group">
        <label for="pw2" class="col-sm-2 control-label">确认密码</label>
        <div class="col-sm-6">
          <input type="password" class="form-control" id="pw2" check-type="required" minlength="6">
        </div>
      </div>  

      <div class="form-group">
        <label for="vercode" class="col-sm-2 control-label">验证码</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="vercode" check-type="number" range="2.2,5">
        </div>
      </div>  

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-primary col-sm-4">注册</button>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <span id="error-text" style="color: #FF0000;"></span>
        </div>
      </div>

    </form>

bootstrap3 validation

About

bootstrap3 validation

Resources

Stars

89 stars

Watchers

21 watching

Forks

Releases

Packages

Contributors

Languages