效果：

html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

        <title>表单提交验证</title>

        <link rel="stylesheet" href="css/amazeui.css">

        <script type="text/javascript" src="js/jquery.min.js"></script>

        <script src="js/amazeui.min.js"></script>

        <script src="js/app.js"></script>

    </head>

    <body>

        <form id="form2" class="am-form am-form-horizontal">

            <div id="panel2" style="margin-top:5px">

                <div class="am-form-group am-u-sm-12" style="margin-top:5px">

                    <div class="am-u-sm-6">

                        <label class="am-u-sm-4 am-form-label"><span style="color: #ff0000;">*</span>姓名:</label>

                        <div class="am-u-sm-8">
                            <!-- 验证非空 -->

                            <input id="deptname" class="am-form-field" maxlength=10 placeholder="姓名" style="width:300px" pattern="^[\s\S]*.*[^\s][\s\S]*$"

                             data-validation-message="姓名" required></input>

                        </div>

                    </div>

                </div>

                <div class="am-form-group am-u-sm-12" style="margin-top:5px">

                    <div class="am-u-sm-6">

                        <label class="am-u-sm-4 am-form-label"><span style="color: #ff0000;">*</span>年龄:</label>

                        <div class="am-u-sm-8">
                            <!-- 验证为正整数 -->

                            <input id="sortid" class="am-form-field" placeholder="请输入正整数" pattern="^0$|^\+?[1-9]\d*$" maxlength="9" style="width: 300px"

                             data-validation-message="年龄" required></input>

                        </div>

                    </div>

                </div>

                <div class="form-actions" style=" padding-top:1%;text-align: center;">

                    <button type="submit" class="am-btn am-btn-warning">保存</button>

                </div>

        </form>

        <script type="text/javascript">

            //验证提醒

            $(function() {

                $('#form2').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 am-u-sm-8"></div>').hide().appendTo($group);

                        }

                        $alert.html(msg).show();

                    },

                    submit: function() {

                        formValidity = this.isFormValid();

                        if (formValidity) {

                            //输入框校验

                            if ($('#deptname').val() == "1") { //二次验证

                                alert('请正确填写姓名！');

                                return;

                            }

                            alert('保存成功');

                        }

                    }

                });

            });

        </script>

    </body>

</html>

附，两表单共用同一验证：将表单初始化定义为一个函数，点击不同表单时销毁表单验证，重新初始化并隐藏错误提示语

$('#form2').validator('destroy') —— 销毁表单验证
$('.am-form-group').find('.am-alert').hide();——隐藏错误提示

附，自定义验证          参考：https://blog.csdn.net/ltllml44/article/details/52041109?locationNum=4&fps=1html：
···　　
　　<input type="number" class="am-u-sm-12" placeholder="商品总数量 " maxlength="9" id="goodsnum" data-validation-message="请输入商品总数量" pattern="^[0-9]*[1-9][0-9]*$" required />

　　<input type="number" class="am-u-sm-12 js-sync-validate" placeholder="初始数量" maxlength="9" id="goodsinit" data-validation-message="初始数量需小于等于商品总数量"/>
···
js:
$(function() {
　　$('#form').validator({
　　　　validate: function(validity) {//自定义验证必须要放到validate中处理

    　　　//自定义函数处理
　　　　　　var v = $(validity.field).val();

    　　　　//用于判断如果当前对象是类.js-sync-validate的时候执行

    　 　　if ($(validity.field).is('.js-sync-validate')) {
　　　　　　　　if($('#goodsnum').val() <= $('#goodsinit').val()){

            　　validity.valid = false;

            　　return validity;

        　　　}else{

        　　 　　validity.valid = true;

         　　　　validity.typeMismatch=true;

         　　　　return val

    　　　　　}

　　　　　　}
　　　　},

       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 am-u-sm-7"></div>').hide().appendTo($group);

          }

          $alert.html(msg).show();

        },

        submit : function() {

        　　var formValidity = this.isFormValid() && validate.valid  ;

           if (formValidity) {

                  console.log('已保存');

           }

        }

   });

});             
 

amazeUI表单提交验证--input框required的更多相关文章

  1. React技巧之表单提交获取input值

    正文从这开始~ 总览 在React中,通过表单提交获得input的值: 在state变量中存储输入控件的值. 在form表单上设置onSubmit属性. 在handleSubmit函数中访问输入控件的 ...

  2. 原生JS 表单提交验证器

    转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...

  3. aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)

    这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲     上面是效果,下面来说使用步骤 jQuery.Valid ...

  4. Angualr6表单提交验证并跳转

    在Angular6中,使用NG-ZRROR作为前端开发框架,在进行表单开发时遇到了一些问题,最后解决了,在此记录. 1.表单构造: 引入forms: import { FormGroup, FormB ...

  5. easyui dialog 表单提交，弹框初始化赋值，dialog实现

    //定义弹框html<div id="delete" class="easyui-dialog" title="Delete" dat ...

  6. CodeIgniter典型的表单提交验证代码

    view内容: <?php echo form_open('user/reg'); ?> <h5>用户名</h5> <input type="tex ...

  7. 表单提交按钮input和button、a的差异

    现在普遍的在网页中,表单提交数据的按钮最常见实用有三种,一种是input,一种是button,最后一种,是其他如a标签,div标签,span标签代替而来.在以前的日子里,大家都习惯于用input,因为 ...

  8. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  9. 工作总结 表单提交中 Input 设置 disabled readonly

    input框里面添加disabled属性之后,该内容就无法向上提交  需要的时候也可以再移除disabled readonly这个属性来禁止用户修改, 可以正常提交. Hiddent 隐藏  也可以正 ...

随机推荐

  1. 最近工作中用到的Linux指定 PS Kill netstat解释

    1.ps详解点击如下链接 https://jingyan.baidu.com/article/fec4bce2479f05f2618d8b80.html 2.kill kill命令用来删除执行中的程序 ...

  2. ES6 箭头函数this指向

    箭头函数有几个使用注意点. (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误. (3)不可以使 ...

  3. 让nginx支持patchinfo，（支持codeigniter，thinkphp，ZF等框架）

    nginx 的config配置: server { listen ; server_name xxx; ....if (!-e $request_filename) { rewrite ^/(.*)$ ...

  4. 微信-小程序-开发文档-服务端-模板消息：templateMessage.addTemplate

    ylbtech-微信-小程序-开发文档-服务端-模板消息:templateMessage.addTemplate 1.返回顶部 1. templateMessage.addTemplate 本接口应在 ...

  5. .Net Core 部署之一 《CentOS 从GitHub/Gitee 等源代码网站部署Web网站》

    先看下楼主从某阿打折购买的渣渣服务器 lsb_release -a 一.安装dotnet-SDK 注册微软的服务 sudo rpm -Uvh https://packages.microsoft.co ...

  6. Codeforces 1176A Divide it!

    题目链接:http://codeforces.com/problemset/problem/1176/A 思路:贪心,对第二个操作进行俩次等于将n变成n/3,第三个操作同理,我们将n不断除以2,再除以 ...

  7. java 传入多个参数时报"Parameter 'XXX' not found. Available parameters are [arg1, arg0, param1,..." 解决方案

    @Select("SELECT id FROM ae_post ORDER BY id DESC LIMIT #{page},#{size}") List<Post> ...

  8. Elasticsearch(Transport Client)常用操作

    这里描述操作elasticsearch采用TransportClient这种方式,官方明确表示在ES 7.0版本中将弃用TransportClient客户端,且在8.0版本中完全移除它. 记录一些常用 ...

  9. Cookie自动管理

    如果想要对 cookies 干点什么就需要 HTTP Cookie 管理器了. 啥是 cookies 呢.储存在用户本地终端上的数据通常情况下,当用户结束浏览器会话 时,系统将终止所有的 Cookie ...

  10. 数据库MySQL--联合查询

    应用场景:当要查询的结果来自多个表,且多个表没有直接的连接关系,但查询的信息一致时 语法: 查询语句1 union(all) 查询语句2 union(all) ..... 注:多条查询语句的查询列数要 ...