blur事件触发验证

[itlily]

我的办法是：使用onblur触发验证。
问题是：会显示所有的验证没通过的信息。可以只显示当前的吗？

<form name="example_form" action="#" method="POST" class="form-horizontal">

        <div class="form-group">
            <label for="req">必填字段:</label>
            <input type="text" name="req" id="req" class="form-control" placeholder="必填" onblur="blurValidate()">
        </div>

        <div class="form-group">
            <label for="alphanumeric">文字字数:</label>
            <input type="text" name="alphanumeric" id="alphanumeric" class="form-control" placeholder="字数大于5，小于15">
        </div>

        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" name="email" id="email" class="form-control" placeholder="验证是否为Email">
        </div>

        <div class="form-group">
            <label for="minlength">字符长度判断:</label>
            <input type="text" name="minlength" id="minlength" class="form-control" placeholder="至少输入8个字符">
        </div>

        <div class="cleanfix"></div>

        <div class="checkbox">
            <label for="tos_checkbox">
                <input name="tos_checkbox" id="tos_checkbox" type="checkbox"> 复选框必填(用于服务条款)
                
            </label>
        </div>

        <div class="error_msg" id="error_msg" ></div>

        <button class="btn-default" type="submit" name="submit">提交按钮</button>
    </form>

<script type="text/javascript">
var validator = new Validator('example_form',[
    {		
        name:"req",
        display:"必填字段不能为空",
        rules: 'required'
    },{
        name:"alphanumeric",
        display:"字数小于5个字符|大于15个字符",
        rules: 'min_length(5)|max_length(15)'
    },{
        name:"email",
        display:"请输入您的{{email}}|这不是一个邮箱",
        rules: 'required|is_email'
    },{
        name:"minlength",
        display:"不能为空|至少输入8个字符，您输入的{{minlength}}长度少于8",
        rules: 'required|min_length(8)'
    },{
        name:"tos_checkbox",
        display:"复选框不能为空",
        rules: 'required'
    }
],function(obj,evt){

    var errors_elm = document.getElementById('error_msg');
    errors_elm.style.display = 'none';
    //obj = {
    //  callback:(error, evt, handles)
    //  errors:Array[2]
    //  fields:Object
    //  form:form#example_form
    //  handles:Object
    //  isCallback:true
    //  isEmail:(field)
    //  isFax:(field)
    //  isIp:(field)
    //  isPhone:(field)
    //  isTel:(field)
    //  isUrl:(field)
    //  maxLength:(field, length)
    //  minLength:(field, length)
    //  required:(field)
    //} 
    console.log(evt);
    console.log(obj);
    if(obj.errors.length>0){
        // 判断是否错误
        var error_str = '';
        for (var i = 0; i < obj.errors.length; i++) {
            error_str += i+1 + ':' + obj.errors[i].message + '；<br/>';
        }
        errors_elm.style.display = "block";
        errors_elm.innerHTML = error_str;

    }
    
})

function blurValidate(){
 validator.validate();
}
</script>

[jaywcjlove]

有空帮你看看, @itlily 为什么用点击呢？
我看了一下我的实现，事实上，这个是利用 Form + submit 类型按钮 触发 form标签的onsubmit事件，onblur 没有办法玩儿呢

[itlily]

现在很多表单的场景是 blur就触发条件判断显示信息的。所以想请教一下有没有相关的实现思路。看来只能在blur事件中再单独处理了，感谢.

[jaywcjlove]

给你一个思路，onblur 事件调用 validator.validate(); 进行验证，每个 input下面放一个表情存储错误信息的地方。离开输入框事件，是可以找到你输入的节点 ，可以判断是在那个节点上输入的

将返回的地方生成到，对应的错误节点上去，

来了个例子你运行一下看看

<form name="example_form" action="#" method="POST" class="form-horizontal">
  <div class="form-group">
    <label for="req">必填字段:</label>
    <input type="text" name="req" class="form-control" placeholder="必填" onblur="blurValidate(this)">
    <div  id="req"></div>
  </div>
  <button class="btn-default" type="submit" name="submit">提交按钮</button>
</form>
<script type="text/javascript">
var validator = new Validator('example_form',[
  {   
      name:"req",
      display:"必填字段不能为空",
      rules: 'required'
  },{
      name:"alphanumeric",
      display:"字数小于5个字符|大于15个字符",
      rules: 'min_length(5)|max_length(15)'
  },{
      name:"email",
      display:"请输入您的{{email}}|这不是一个邮箱",
      rules: 'required|is_email'
  },{
      name:"minlength",
      display:"不能为空|至少输入8个字符，您输入的{{minlength}}长度少于8",
      rules: 'required|min_length(8)'
  },{
      name:"tos_checkbox",
      display:"复选框不能为空",
      rules: 'required'
  }
])

function blurValidate(e){
  var val = validator.validate();
  for(var i=0;i< val.errors.length;i++){
    if(e.name == val.errors[i].name){
      document.getElementById(e.name).innerHTML = val.errors[i].display
    }
  }
}
</script>

可能说得不太清楚，但是希望你能懂

@itlily