amazeUI表单提交验证--input框required
效果：
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的更多相关文章
- React技巧之表单提交获取input值
正文从这开始~ 总览 在React中,通过表单提交获得input的值: 在state变量中存储输入控件的值. 在form表单上设置onSubmit属性. 在handleSubmit函数中访问输入控件的 ...
- 原生JS 表单提交验证器
转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...
- aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲 上面是效果,下面来说使用步骤 jQuery.Valid ...
- Angualr6表单提交验证并跳转
在Angular6中,使用NG-ZRROR作为前端开发框架,在进行表单开发时遇到了一些问题,最后解决了,在此记录. 1.表单构造: 引入forms: import { FormGroup, FormB ...
- easyui dialog 表单提交，弹框初始化赋值，dialog实现
//定义弹框html<div id="delete" class="easyui-dialog" title="Delete" dat ...
- CodeIgniter典型的表单提交验证代码
view内容: <?php echo form_open('user/reg'); ?> <h5>用户名</h5> <input type="tex ...
- 表单提交按钮input和button、a的差异
现在普遍的在网页中,表单提交数据的按钮最常见实用有三种,一种是input,一种是button,最后一种,是其他如a标签,div标签,span标签代替而来.在以前的日子里,大家都习惯于用input,因为 ...
- Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...
- 工作总结 表单提交中 Input 设置 disabled readonly
input框里面添加disabled属性之后,该内容就无法向上提交 需要的时候也可以再移除disabled readonly这个属性来禁止用户修改, 可以正常提交. Hiddent 隐藏 也可以正 ...
随机推荐
- 高危预警| SQL数据库成主要攻击对象，或引发新一轮大规模勒索
近日,阿里云安全团队发现,目前互联网上的服务器,SQL数据库仍然有不少处于直接暴露在公网的状态,且数量有上升趋势.黑客可以利用数据库存在的漏洞或弱口令直接获取数据,并植入勒索和挖矿病毒寻求牟利.阿里云 ...
- NX二次开发-UFUN导入表达式UF_MODL_import_exp
最近在做表达式创建,发现UFUN的创建表达式函数UF_MODL_create_exp,UF_MODL_create_exp_tag没有办法创建字符串类型的表达式,例如AA="BB" ...
- NX11.0和VS2013 创建NXOpen 开发模版失败解决方案【转载】
转载自PLM之家论坛 NX11.0和VS2013 创建NXOpen 开发模版失败解决方案 首先我觉得这个可能是西门子疏忽,基本上每个大版本没有补丁前都有类似问题,下面来说说怎么解决吧.注意这里版本,N ...
- hdu多校第五场1007 （hdu6630） permutation 2 dp
题意: 给你n个数,求如下限制条件下的排列数:1,第一位必须是x,2,最后一位必须是y,3,相邻两位之差小于等于2 题解: 如果x<y,那么考虑把整个数列翻转过来,减少讨论分支. 设dp[n]为 ...
- fedora23上安装和运行MySQL server (MySQL 已经被MariaDB取代)
[root@localhost kemin]# dnf install mysql-server Fedora 23 - x86_64 - Updates ...
- [zz]使用OleDb，将Excel导入DataSet
本方法,将传入的Excel文件内所有的Sheet内的数据都填充入DataSet中.这是一个简单快捷的方法,不足之处是不适合带有格式复杂的Excel文件.(比如:有合并单元格的) public clas ...
- scrapy的使用--Rcrapy-Redis
Scrapy-Redis分布式爬虫组件 Scrapy是一个框架,他本身是不支持分布式的.如果我们想要做分布式的爬虫.就需要借助一个组件叫做Scrapy-Redis.这个组件正式利用了Redis可以分布 ...
- java 数组中的数值反转输出
package com.test; /** *数组元素反转 * */ public class ArraySwap { public static void main(String[] args) { ...
- SpringCloud学习笔记《---05 Zuul---》基础篇
- Centos7解压.tar.bz2提示tar (child): bzip2: Cannot exec: No such file or directory解决方法
Centos7解压.tar.bz2提示tar (child): bzip2: Cannot exec: No such file or directory解决方法 原因是因为该centos没有bzip ...