Add example.

jaywcjlove · Sep 12, 2017 · 7392658 · 7392658
1 parent f85b38b
commit 7392658
Showing 1 changed file with 126 additions and 0 deletions.
diff --git a/example/index.html b/example/index.html
@@ -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>