Valid 验证提示
使用方法
在ax-form-input后使用ax-valid显示验证结果，配合颜色和图标表示不同的验证提示。基本结构如下：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称</div>
<div class="ax-form-con">
<div class="ax-form-input"><input type="text"></div>
<div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-fill"></span> 文字</div>
</div>
</div>
</div>
姓名：
填写完成
姓名：
请正确填写用户名
姓名：
比如：李四
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
<div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-fill"></span> 填写完成</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
<div class="ax-valid ax-color-danger"><span class="ax-iconfont ax-icon-close-o-fill"></span> 请正确填写用户名</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
<div class="ax-valid ax-color-ignore">比如：李四</div>
</div>
</div>
</div>
加强
给输入控件添加ax-check-primary、ax-check-danger等样式可与下方验证提示配合加强显示效果。
姓名：
填写完成
姓名：
请正确填写用户名
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="李文" class="ax-check-primary" type="text"></div>
<div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-fill"></span> 填写完成</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="张勋" class="ax-check-danger" type="text"></div>
<div class="ax-valid ax-color-danger"><span class="ax-iconfont ax-icon-close-o-fill"></span> 请正确填写用户名</div>
</div>
</div>
</div>
组合
可与表单基础控件配合使用，举一反三。
姓名：
请正确填写用户名
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="李文" class="ax-check-primary" type="text"></div>
<div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-fill"></span> 填写完成</div>
</div>
<a href="###" class="ax-form-btn ax-btn ax-primary">从列表选填</a>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="张勋" class="ax-check-danger" type="text"></div>
<div class="ax-valid ax-color-danger"><span class="ax-iconfont ax-icon-close-o-fill"></span> 请正确填写用户名</div>
</div>
<span class="ax-form-txt ax-color-ignore">不超过4个字</span>
</div>
</div>
五种验证
本框架一共设置了5种彩色验证提示，表示不同的意义，用户可按需选择使用。
完成：
填写完成
错误：
请正确填写用户名
成功：
填写正确
警告：
注意消息
信息：
信息通知
广告：
广告疑问
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">完成：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="李文" class="ax-check-primary" type="text"></div>
<div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-fill"></span> 填写完成</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">错误：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="张勋" class="ax-check-danger" type="text"></div>
<div class="ax-valid ax-color-danger"><span class="ax-iconfont ax-icon-close-o-fill"></span> 请正确填写用户名</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">成功：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="侯正宇" class="ax-check-success" type="text"></div>
<div class="ax-valid ax-color-success"><span class="ax-iconfont ax-icon-check-o-fill"></span> 填写正确</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">警告：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="方国胜" class="ax-check-warning" type="text"></div>
<div class="ax-valid ax-color-warning"><span class="ax-iconfont ax-icon-alert-fill"></span>注意消息</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">信息：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="魏强" class="ax-check-info" type="text"></div>
<div class="ax-valid ax-color-info"><span class="ax-iconfont ax-icon-question-o"></span> 信息通知</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">广告：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="魏强" class="ax-check-ad" type="text"></div>
<div class="ax-valid ax-color-ad"><span class="ax-iconfont ax-icon-question-o"></span> 广告疑问</div>
</div>
</div>
</div>
Qquery.Validate表单验证 PLUGIN
jquery.validate是jquery家族非常受欢迎的表单验证插件。本框架在原版v1.19.1基础上进行了修改整合，使用方法一致。修改内容如下：
- 新增
inputClass属性，表示错误时input使用的样式 - 将原版默认的英文提示文字换成了中文提示文字
-
<script src="src/plugins/jquery.validate/jquery.validate.min.js" type="text/javascript"></script> <script type='text/javascript'> $(document).ready(function () { $("#regForm").validate({ debug:true, rules: { name: "required", pass: { required: true, minlength: 6 }, pass2: { required: true, minlength: 6, equalTo: "#pass" }, }, messages: { name: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 请输入用户名！</div>", pass: { required: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 请输入密码</div>", minlength: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 密码长度不能小于 6 个字母</div>" }, pass2: { required: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 请输入密码</div>", minlength: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 密码长度不能小于 6 个字母</div>", equalTo: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 两次密码输入不一致</div>" }, } }); }); </script> -
<form id="regForm" method="get" action=""> <div class="demo"> <div class="inner" style="padding: 14px;"> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">账号：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="name" placeholder="输入账号" type="text"></div> </div> <div class="ax-form-txt ax-color-ignore">必填</div> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">密码：</div> <div class="ax-form-con"> <div class="ax-form-input"><input id="pass" name="pass" placeholder="" type="password"></div> </div> <div class="ax-form-txt ax-color-ignore">必填</div> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">确认密码：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="pass2" placeholder="" type="password"></div> </div> <div class="ax-form-txt ax-color-ignore">必填</div> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label"></div> <div class="ax-flex-block"> <div class="ax-form-input"><button type="submit" class="ax-btn ax-primary">提交</button> <button type="reset" class="ax-btn">取消</button></div> </div> </div> </div> </div> </div> </form>
改变提示位置。
-
<script src="src/plugins/jquery.validate/jquery.validate.min.js" type="text/javascript"></script> <script type='text/javascript'> $(document).ready(function () { $("#regForm2").validate({ errorPlacement: function(error, element) { error.insertAfter(element.parent().parent()); }, debug:true, errorClass: "ax-form-txt", rules: { name: "required", pass: { required: true, minlength: 6 }, pass2: { required: true, minlength: 6, equalTo: "#pass2" }, }, messages: { name: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 请输入用户名！</div></div>", pass: { required: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 请输入密码</div>", minlength: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 密码长度不能小于 6 个字母</div>" }, pass2: { required: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 请输入密码</div>", minlength: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 密码长度不能小于 6 个字母</div>", equalTo: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 两次密码输入不一致</div>" }, } }); $("#regForm3").validate({ debug:true, errorLabelContainer:"#alltips", rules: { name: "required", pass: { required: true, minlength: 6 }, pass2: { required: true, minlength: 6, equalTo: "#pass3" }, }, messages: { name: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 请输入用户名！</div>", pass: { required: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 请输入密码</div>", minlength: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 密码长度不能小于 6 个字母</div>" }, pass2: { required: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 请输入密码</div>", minlength: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 密码长度不能小于 6 个字母</div>", equalTo: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 两次密码输入不一致</div>" }, } }); }); </script> -
<form id="regForm2" method="get" action=""> <div class="demo"> <div class="inner" style="padding: 14px;"> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">账号：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="name" placeholder="输入账号" type="text"></div> <div class="ax-valid ax-color-ignore">比如：李四</div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">密码：</div> <div class="ax-form-con"> <div class="ax-form-input"><input id="pass2" name="pass" placeholder="" type="password"></div> <div class="ax-valid ax-color-ignore">6位数密码</div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">确认密码：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="pass2" placeholder="" type="password"></div> <div class="ax-valid ax-color-ignore">6位数密码</div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label"></div> <div class="ax-flex-block"> <div class="ax-form-input"><button type="submit" class="ax-btn ax-primary">提交</button> <button type="reset" class="ax-btn">取消</button></div> </div> </div> </div> </div> </div> </form> <form id="regForm3" method="get" action=""> <div class="demo"> <div class="inner" style="padding: 14px;"> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">账号：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="name" placeholder="输入账号" type="text"></div> <div class="ax-valid ax-color-ignore">比如：李四</div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">密码：</div> <div class="ax-form-con"> <div class="ax-form-input"><input id="pass3" name="pass" placeholder="" type="password"></div> <div class="ax-valid ax-color-ignore">6位数密码</div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">确认密码：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="pass2" placeholder="" type="password"></div> <div class="ax-valid ax-color-ignore">6位数密码</div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label"></div> <div class="ax-flex-block"> <div class="ax-form-input"><button type="submit" class="ax-btn ax-primary">提交</button> <button type="reset" class="ax-btn">取消</button></div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label"></div> <div class="ax-flex-block"> <div id="alltips"></div> </div> </div> </div> </div> </div> </form>
验证成功提示。
-
<script src="src/plugins/jquery.validate/jquery.validate.min.js" type="text/javascript"></script> <script type='text/javascript'> $(document).ready(function () { $("#regForm4").validate({ debug:true, rules: { name: "required", pass: { required: true, minlength: 6 }, pass2: { required: true, minlength: 6, equalTo: "#pass4" }, }, messages: { name: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 请输入用户名！</div>", pass: { required: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 请输入密码</div>", minlength: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 密码长度不能小于 6 个字母</div>" }, pass2: { required: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 请输入密码</div>", minlength: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 密码长度不能小于 6 个字母</div>", equalTo: "<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 两次密码输入不一致</div>" }, }, success: function(label) { label.removeClass("ax-color-danger").html("<div class='ax-color-primary'><span class='ax-iconfont ax-icon-check-o-fill'></span> 通过验证</div>"); } }); }); </script> -
<form id="regForm4" method="get" action=""> <div class="demo"> <div class="inner" style="padding: 14px;"> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">账号：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="name" placeholder="输入账号" type="text"></div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">密码：</div> <div class="ax-form-con"> <div class="ax-form-input"><input id="pass4" name="pass" placeholder="" type="password"></div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">确认密码：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="pass2" placeholder="" type="password"></div> </div> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label"></div> <div class="ax-flex-block"> <div class="ax-form-input"><button type="submit" class="ax-btn ax-primary">提交</button> <button type="reset" class="ax-btn">取消</button></div> </div> </div> </div> </div> </div> </form>
使用jQuery.validator插件中的addMethod方法完成其他验证，比如手机号。
-
<script src="src/plugins/jquery.validate/jquery.validate.min.js" type="text/javascript"></script> <script type='text/javascript'> $(document).ready(function () { jQuery.validator.addMethod("mobile", function(value, element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ return this.optional(element) || (length == 11 && mobile.test(value)); }, "手机号码格式错误！"); $("#otherForm1").validate({ debug:true, rules: { name: { required: true, mobile:true, } }, messages: { name: { required:"请输入手机号！", } }, success: function(label) { label.removeClass("ax-color-danger").html("通过验证"); } }); jQuery.validator.addMethod("phone", function(value, element) { var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/; return this.optional(element) || (tel.test(value)); }, "座机号码格式错误！"); $("#otherForm2").validate({ debug:true, rules: { name: { required: true, phone:true, } }, messages: { name: { required:"请输入座机号！", } }, success: function(label) { label.removeClass("ax-color-danger").html("通过验证"); } }); jQuery.validator.addMethod("zipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "邮编格式错误！"); $("#otherForm3").validate({ debug:true, rules: { name: { required: true, zipCode:true, } }, messages: { name: { required:"请输入邮编号！", } }, success: function(label) { label.removeClass("ax-color-danger").html("通过验证"); } }); jQuery.validator.addMethod("qq", function(value, element) { var tel = /^[1-9]\d{4,9}$/; return this.optional(element) || (tel.test(value)); }, "QQ号格式错误！"); $("#otherForm4").validate({ debug:true, rules: { name: { required: true, qq:true, } }, messages: { name: { required:"请输入QQ号！", } }, success: function(label) { label.removeClass("ax-color-danger").html("通过验证"); } }); jQuery.validator.addMethod("ip", function(value, element) { var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/; return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256)); }, "IP地址格式错误！"); $("#otherForm5").validate({ debug:true, rules: { name: { required: true, ip:true, } }, messages: { name: { required:"请输入IP地址！", } }, success: function(label) { label.removeClass("ax-color-danger").html("通过验证"); } }); }); </script> -
<form id="otherForm1" method="get" action=""> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">手机号：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="name" placeholder="输入手机号" type="text"></div> </div> <button type="submit" class="ax-form-btn ax-btn ax-primary">提交</a> </div> </div> </form> <div class="ax-break-md"></div> <form id="otherForm2" method="get" action=""> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">座机号：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="name" placeholder="输入座机号" type="text"></div> </div> <button type="submit" class="ax-form-btn ax-btn ax-primary">提交</a> </div> </div> </form> <div class="ax-break-md"></div> <form id="otherForm3" method="get" action=""> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">邮编号：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="name" placeholder="输入邮编号" type="text"></div> </div> <button type="submit" class="ax-form-btn ax-btn ax-primary">提交</a> </div> </div> </form> <div class="ax-break-md"></div> <form id="otherForm4" method="get" action=""> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">QQ号：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="name" placeholder="输入QQ号" type="text"></div> </div> <button type="submit" class="ax-form-btn ax-btn ax-primary">提交</a> </div> </div> </form> <div class="ax-break-md"></div> <form id="otherForm5" method="get" action=""> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">IP地址：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="name" placeholder="输入IP地址" type="text"></div> </div> <button type="submit" class="ax-form-btn ax-btn ax-primary">提交</a> </div> </div> </form>