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>
效果图:
相关推荐
85443563 2020-04-30
nercon 2020-07-26
WangJiangNan 2020-01-07
typhoonpython 2019-11-03
renpinghao 2019-11-03
谷歌架构师 2016-04-15
tztzyzyz 2020-07-20
nercon 2020-07-16
hzyuhz 2020-06-28
xustart0 2020-06-14
YAruli 2020-06-13
Kakoola 2020-05-17
ThinkingLink 2020-05-16
xcguoyu 2020-03-04
somboy 2020-03-03
Elements小帅 2020-01-16