-
-
Notifications
You must be signed in to change notification settings - Fork 118
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f85b38b
commit 7392658
Showing
1 changed file
with
126 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,126 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<title>Document</title> | ||
<script type="text/javascript" src="../dist/validator.js"></script> | ||
</head> | ||
<body> | ||
<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="passworld">密码:</label> | ||
<input type="passworld" name="passworld" id="passworld" class="form-control" placeholder="输入密码"> | ||
</div> | ||
|
||
<div class="form-group"> | ||
<label for="repassworld">确认密码:</label> | ||
<input type="repassworld" name="repassworld" id="repassworld" class="form-control" placeholder="输入密码"> | ||
</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' | ||
},{ | ||
name:"passworld", | ||
display:"1必填", | ||
rules: 'required' | ||
},{ | ||
name:"repassworld", | ||
display:"密码不一致", | ||
rules: 'same(passworld)' | ||
} | ||
],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> | ||
</body> | ||
</html> |