`

AmazeUI 表单验证

 
阅读更多

 

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单验证</title>
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</head>
<body style="padding: 50px;">
<!--JS 表单验证-->
<form action="" class="am-form" data-am-validator>
  <fieldset>
    <legend>JS 表单验证</legend>
    <div class="am-form-group">
      <label for="doc-vld-name-2">用户名：</label>
      <input type="text" id="doc-vld-name-2" minlength="3" placeholder="输入用户名（至少 3 个字符）" required/>
    </div>
    <div class="am-form-group">
      <label for="doc-vld-email-2">邮箱：</label>
      <input type="email" id="doc-vld-email-2" placeholder="输入邮箱" required/>
    </div>
    <div class="am-form-group">
      <label for="doc-vld-url-2">网址：</label>
      <input type="url" id="doc-vld-url-2" placeholder="输入网址" required/>
    </div>
    <div class="am-form-group">
      <label for="doc-vld-age-2">年龄：</label>
      <input type="number" class=""  id="doc-vld-age-2" placeholder="输入年龄  18-120" min="18" max="120" required />
    </div>
    <div class="am-form-group">
      <label class="am-form-label">爱好：</label>
      <label class="am-checkbox-inline">
        <input type="checkbox" value="橘子" name="docVlCb" minchecked="2" maxchecked="4" required> 橘子
      </label>
      <label class="am-checkbox-inline">
        <input type="checkbox" value="苹果" name="docVlCb"> 苹果
      </label>
      <label class="am-checkbox-inline">
        <input type="checkbox" value="菠萝" name="docVlCb"> 菠萝
      </label>
      <label class="am-checkbox-inline">
        <input type="checkbox" value="芒果" name="docVlCb"> 芒果
      </label>
      <label class="am-checkbox-inline">
        <input type="checkbox" value="香蕉" name="docVlCb"> 香蕉
      </label>
    </div>
    <div class="am-form-group">
      <label>性别： </label>
      <label class="am-radio-inline">
        <input type="radio"  value="" name="docVlGender" required> 男
      </label>
      <label class="am-radio-inline">
        <input type="radio" name="docVlGender"> 女
      </label>
      <label class="am-radio-inline">
        <input type="radio" name="docVlGender"> 其他
      </label>
    </div>
    <div class="am-form-group">
      <label for="doc-select-1">下拉单选框</label>
      <select id="doc-select-1" required>
        <option value="">-=请选择一项=-</option>
        <option value="option1">选项一...</option>
        <option value="option2">选项二.....</option>
        <option value="option3">选项三........</option>
      </select>
      <span class="am-form-caret"></span>
    </div>
    <div class="am-form-group">
      <label for="doc-select-2">多选框</label>
      <select multiple class="" id="doc-select-2" minchecked="2" maxchecked="4">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
    <div class="am-form-group">
      <label for="doc-vld-ta-2">评论：</label>
      <textarea id="doc-vld-ta-2" minlength="10" maxlength="100"></textarea>
    </div>
    <button class="am-btn am-btn-secondary" type="submit">提交</button>
  </fieldset>
</form>
<script>
$(function() {
  $('#doc-vld-msg').validator({
    onValid: function(validity) {
      $(validity.field).closest('.am-form-group').find('.am-alert').hide();
    },
    onInValid: function(validity) {
      var $field = $(validity.field);
      var $group = $field.closest('.am-form-group');
      var $alert = $group.find('.am-alert');
      // 使用自定义的提示信息 或 插件内置的提示信息
      var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
      if (!$alert.length) {
        $alert = $('<div class="am-alert am-alert-danger"></div>').hide().
          appendTo($group);
      }
      $alert.html(msg).show();
    }
  });
});
</script>
</body>
</html>

效果图：

 

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单验证</title>
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</head>
<body style="padding: 50px;">
<!--Tooltip-->
<form action="" class="am-form" id="form-with-tooltip">
  <fieldset>
    <legend>定义 Tooltip</legend>
    <div class="am-form-group">
      <label for="doc-vld-name-2-0">用户名：</label>
      <input type="text" id="doc-vld-name-2-0" minlength="3"
             placeholder="输入用户名（至少 3 个字符）" required/>
    </div>
    <div class="am-form-group">
      <label for="doc-vld-pwd-1-0">密码：</label>
      <input type="password" id="doc-vld-pwd-1-0" placeholder="6 位数字的银行卡密码" pattern="^\d{6}$" required data-foolish-msg="把 IQ 卡密码交出来！"/>
    </div>
    <button class="am-btn am-btn-secondary" type="submit">提交</button>
  </fieldset>
</form>
<style>
  #vld-tooltip {
    position: absolute;
    z-index: 1000;
    padding: 5px 10px;
    background: #F37B1D;
    min-width: 150px;
    color: #fff;
    transition: all 0.15s;
    box-shadow: 0 0 5px rgba(0,0,0,.15);
    display: none;
  }
  #vld-tooltip:before {
    position: absolute;
    top: -8px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -8px;
    content: "";
    border-width: 0 8px 8px;
    border-color: transparent transparent #F37B1D;
    border-style: none inset solid;
  }
</style>
<script>
$(function() {
  var $form = $('#form-with-tooltip');
  var $tooltip = $('<div id="vld-tooltip">提示信息！</div>');
  $tooltip.appendTo(document.body);
  $form.validator();
  var validator = $form.data('amui.validator');
  $form.on('focusin focusout', '.am-form-error input', function(e) {
    if (e.type === 'focusin') {
      var $this = $(this);
      var offset = $this.offset();
      var msg = $this.data('foolishMsg') || validator.getValidationMessage($this.data('validity'));

      $tooltip.text(msg).show().css({
        left: offset.left + 10,
        top: offset.top + $(this).outerHeight() + 10
      });
    } else {
      $tooltip.hide();
    }
  });
});
</script>

</body>
</html>

效果图：

 

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单验证</title>
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</head>
<body style="padding: 50px;">
<form action="" class="am-form" data-am-validator>
  <fieldset>
    <legend>密码验证</legend>
    <div class="am-form-group">
      <label for="doc-vld-name-2">用户名：</label>
      <input type="text" id="doc-vld-name-2" minlength="3"
             placeholder="输入用户名（至少 3 个字符）" required/>
    </div>
    <div class="am-form-group">
      <label for="doc-vld-pwd-1">密码：</label>
      <input type="password" id="doc-vld-pwd-1" placeholder="6 位数字的银行卡密码" pattern="^\d{6}$" required/>
    </div>
    <div class="am-form-group">
      <label for="doc-vld-pwd-2">确认密码：</label>
      <input type="password" id="doc-vld-pwd-2" placeholder="请与上面输入的值一致" data-equal-to="#doc-vld-pwd-1" required/>
    </div>
    <button class="am-btn am-btn-secondary" type="submit">提交</button>
  </fieldset>
</form>
</body>
</html>

效果图：

 

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单验证</title>
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</head>
<body style="padding: 50px;">
<!--自定义验证-->
<form action="" class="am-form" id="doc-vld-ajax">
  <fieldset>
    <legend>自定义验证</legend>
    <div class="am-form-group">
      <label for="doc-vld-ajax-count">Ajax 服务器端验证：</label>
      <input type="text" class="js-ajax-validate" id="doc-vld-ajax-count"
             placeholder="只能填写数字 10" data-validate-async/>
    </div>
    <div class="am-form-group">
      <label for="doc-vld-sync">客户端验证：</label>
      <input type="text" class="js-sync-validate" id="doc-vld-sync"
             placeholder="只能填写数字 10"/>
    </div>
    <button class="am-btn am-btn-secondary" type="submit">提交</button>
  </fieldset>
</form>
<script>
$(function() {
  $('#doc-vld-ajax').validator({
    validate: function(validity) {
      var v = $(validity.field).val();
      var comparer = function(v1, v2) {
        if (v1 != v2) {
          validity.valid = false;
        }
        // 这些属性目前 v2.3 以前没什么用，如果不想写可以忽略
        // 从 v2.3 开始，这些属性被 getValidationMessage() 用于生成错误提示信息
        if (v2 < 10) {
          validity.rangeUnderflow = true;
        } else if(v2 > 10) {
          validity.rangeOverflow = true;
        }
      };
      // Ajax 验证
      if ($(validity.field).is('.js-ajax-validate')) {
        // 异步操作必须返回 Deferred 对象
        return $.ajax({
          url: 'http://s.amazeui.org/media/i/demos/validate.json',
          // cache: false, 实际使用中请禁用缓存
          dataType: 'json'
        }).then(function(data) {
          comparer(data.count, v);
          return validity;
        }, function() {
          return validity;
        });
      }
      // 本地验证，同步操作，无需返回值
      if ($(validity.field).is('.js-sync-validate')) {
        comparer(10, v);
        // return validity;
      }
    }
  });
});
</script>
</body>
</html>

效果图：

 

 

 

  • 大小: 15.2 KB
  • 大小: 6.5 KB
  • 大小: 5.4 KB
  • 大小: 4.8 KB
分享到：
| AmazeUI 下拉选框
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    AmazeUI 表单

    总的来说，AmazeUI表单是一个强大的工具，它提供了一整套解决方案来创建适应各种设备的表单，同时兼顾了用户体验和数据验证。通过研究其源码，开发者可以提升前端开发技能，更有效地构建现代Web应用。对于想要提升...

    基于AmazeUI的漂亮后台模板

    2. 表单：模板中可能包含了各种类型的表单元素，如输入框、下拉选择、复选框、单选按钮等，以及表单验证功能，方便用户输入和提交数据。 3. 按钮：AmazeUI提供多种样式的按钮，包括大小、颜色、形状等，满足不同的...

    前端框架amazeui

    AmazeUI是一款优秀的前端开发框架，专为快速构建响应式和移动优先的Web项目而设计。这个框架结合了中国传统设计美学与现代Web技术，提供了一系列丰富的组件和工具，旨在简化前端开发过程，提升用户体验。 首先，...

    AmazeUI框架

    AmazeUI的表单组件支持各种输入类型，包括基本输入框、选择器、日期选择、开关等，同时支持表单验证，确保数据的准确性和完整性。 4. **widget.basic.html** 和 **widget.html**: 这两个文件可能涉及到AmazeUI的...

    AmazeUI模板

    AmazeUI的模板设计简洁而实用，通常包含了一系列预设的页面布局、导航栏、侧边栏、表单、按钮、图标等元素，这些模板可以直接应用于项目中，大大节省了开发时间和成本。"AmazeUI模板简介有效，可以直接拿来使用"这句...

    简单且强大的js表单验证框架

    **标题解析：** "简单且强大的js表单验证框架" 这个标题表明我们要讨论的是一种JavaScript（js）实现的轻量级表单验证工具。它强调了易用性和功能的强大性，暗示这个框架可能提供了丰富的验证规则和灵活的自定义选项...

    AmazeUI-2.3.0

    4. `admin-form.html`：这是关于表单设计的页面，可能包含了各种表单元素和验证机制，展示了AmazeUI在创建复杂表单时的强大能力。 5. `admin-log.html`：可能是日志查看或管理的页面，展示了AmazeUI处理大量数据...

    简单实用的php+amazeui头像上传功能

    在头像上传场景中，AmazeUI可能提供了如按钮、表单、图片预览等元素，使用户能够在前端完成选择和预览头像的操作。 1. **前端部分**： - **文件输入控件**：HTML5的`&lt;input type="file"&gt;`元素用于让用户选择本地的...

    AmazeUI 输入框组

    - AmazeUI提供了表单验证功能，可以通过添加`required`、`pattern`等HTML5属性进行基本的客户端验证。 - 验证失败时，输入框组会显示错误提示，这通常是通过添加`.am-form-error`类来实现的。 4. **附加元素**： ...

    AmazeUI 模态窗口

    又如，你可以在表单提交前用模态窗口进行验证，确保所有字段都已填写。 总结来说，AmazeUI的模态窗口功能强大且易于使用，通过HTML、CSS和JavaScript的组合，开发者可以快速构建具有交互性的网页功能，提高用户体验...

    Amaze UI 手机wap登录页html模板

    5. **表单验证**：在登录页模板中，Amaze UI可能包含了表单验证功能，例如检查用户名和密码是否为空，或者密码是否符合复杂度要求等。这些验证可以帮助提升用户体验，减少无效数据的提交。 6. **CSS3与HTML5**：...

    我用AmazeUI开发了2个demo,一个pc站,一个app站,欢迎学习.zip

    这个压缩包包含两个使用AmazeUI开发的示例项目：一个针对PC端的网站（pc站版）和一个适用于移动设备的应用版本（app版），以及AmazeUI的触摸优化版源码（amazeui-touch-master.zip）和框架的官方链接（Amaze UI - ...

    【AmazeUI】黑白两种主题后台管理模板 - admin

    5. 表单：表单用于收集和编辑数据，AmazeUI的表单组件包括输入框、下拉菜单、开关按钮等，且支持验证功能，确保数据的准确性。 6. 导航：后台管理系统通常包含多个模块，AmazeUI的导航组件如侧边栏、面包屑导航等，...

    AMazeUI Demo

    - **admin-form.html**：这可能是演示如何使用AMazeUI创建表单的页面，包括输入框、复选框、单选按钮等元素，以及验证和提交功能。 - **admin-log.html**：可能是展示日志或操作记录的页面，可能使用了AMazeUI的...

    react-使用AmazeUI的React版本打造的一套适用于博客和论坛的界面

    6. **Form**：表单组件用于收集用户输入，AmazeUI的Form组件提供了各种表单元素，如Input、Select、Checkbox等，以及表单验证功能。 7. **Pagination**：分页组件用于处理大量数据的分页显示，AmazeUI的Pagination...

    amazeui 框架

    AmazeUI是一个强大的前端开发框架，专注于移动优先的跨屏应用设计。它的核心理念是为HTML5开发提供一套完整的解决方案，使开发者能够构建响应式、高性能的Web应用程序，无论是在手机、平板还是桌面电脑上都能呈现出...

    好看的amazeui用户充值界面代码

    AmazeUI提供了丰富的组件和样式，包括布局、表单、按钮、导航、弹窗等，这些都为快速构建界面提供了便利。在这个用户充值界面中，我们可以预见到AmazeUI的使用使得界面在各种屏幕尺寸下都能保持一致性和易用性。 `...

    amazeui页面校验功能的实现代码

    通过对AmazeUI表单验证功能的深入了解和具体实践，我们可以有效地解决实际项目中遇到的各种校验需求。特别是在处理像“邮政编码”这样的字段时，合理的设置`maxlength`和使用合适的验证规则（如`js-pattern-number`...

Magicbox
Global site tag (gtag.js) - Google Analytics