jaywcjlove / jaywcjlove/validator.js
blur事件触发验证
Open
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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