jaywcjlove / jaywcjlove/validator.js

blur事件触发验证

Open
#8 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
553
Forks
114
PR merge metrics
No merged PRs in 30d

Description

我的办法是:使用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>

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the shown blurValidate() entry point and Validator.validate() call, then inspect how the callback receives obj.errors. The requested behavior is to show only the validation message for the field that triggered blur, while preserving the existing form validation behavior; verify this with the provided example.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.