layui 自定义表单验证 以及提交表单
订购数量
</span> <span style="color: red">*</span>:
<input type="text" required lay-verify="required|number|isXiaoYu|isManZu"
id="proOrderNum" name="proOrderNum" class="input" value="1">
<span class="span-color-1">
<button lay-submit lay-filter="go"
class="layui-btn layui-btn-radius layui-btn-normal">立即购买
</button>
layui.use('form', function () {
var form = layui.form;
form.verify({
isXiaoYu: function (value, item) {
if ($("#proNum").val() - value < 0) { // 不满足库存
return "订购数量不能大于库存数量";
}
},
isManZu: function (value, item) {
var code = 0;
var salePrice = $("#salePrice").val();
var url = "/user/serproduct/getResQuotaList";
var data = {resType: 103, salePrice: salePrice, proOrderNum: value};
$.ajax({
type: "get",
url: url,
async: false,//同步提交。不设置则默认异步,异步的话,最后执行ajax
data: data,
success: function (ev) {
code = ev.code;
}
});
if (code == 500) {
return "额度不满足,无法下订单";
}
}
})
;
})
;
-------------------------
<input type="button" class="layui-btn layui-btn-warm layui-btn-sm"
onclick="evaluateInfo(${it.id?c},3)"
value="服务完成">
function evaluateInfo(id, orderState) {
layui.use('layer', function () {
var layer = layui.layer;
//iframe层
layer.open({
type: 2,
title: '服务完成',
shadeClose: true,
shade: 0.8,
area: ['600px', '400px'],
content: '/user/serproOrder/evaluateInfo?id=' + id + '&orderState=' + orderState //iframe的url
});
});
}
<form id="evaluateInfoForm" class="layui-form" action="#" method="get">
<div class="attestation-info">
<label class="layui-form-label">评分<span style="color: red">*</span></label>
<div class="layui-input-block">
<input name="score" type="text" placeholder="1-100分"
value="" required lay-verify="required|number"
autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label">评价</label>
<div class="layui-input-block"> <textarea name="evaluate" placeholder="请输入评价内容" class="layui-textarea"></textarea> </div>
<input type="hidden" name="id"
value="${id?c}"
autocomplete="off" class="layui-input">
<input type="hidden" name="orderState"
value="${orderState}"
autocomplete="off" class="layui-input">
<div class="layui-form-item">
<div class="layui-input-block"> <button lay-submit lay-filter="go"
class="layui-btn layui-btn-normal ">提交
</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</div>
</form>
layui.use('form', function () {
var form = layui.form;
// 这个是在iframe里面的js代码
var frameindex = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
form.on('submit(go)', function (data) {
// console.log(data.elem);//被执行事件的元素DOM对象,一般为button对象
// console.log(data.form);//被执行提交的form对象,一般在存在form标签时才会返回
console.log(data.field); //当前容器的全部表单字段,名值对形式:{name: value}
var index = layer.load(1, {
shade: [0.1, '#fff'] //0.1透明度的白色背景
});
var url = '/user/serproOrder/changeProOrderState';
$.get(url, data.field, function (ev) {
if (ev.code == 200) {
layer.msg(ev.msg);
parent.location.href = "/user/serproOrder/getServiceProductOrderListV";
} else {
layer.close(index);
layer.msg(ev.msg);
}
}, 'json')
//发送ajax
return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
})
layui 自定义表单验证 以及提交表单的更多相关文章
- button 按钮,结合onclick事件,验证和提交表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Validator验证Ajax提交表单的方法
Validator验证Ajax提交表单的方法 转自:http://hunanpengdake.iteye.com/blog/1671360 当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form ...
- 第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单
jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...
- 雷林鹏分享:jQuery EasyUI 表单 - 创建异步提交表单
jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...
- js基础-表单验证和提交
基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...
- ng表单验证,提交以后才显示错误
只在提交表单后显示错误信息 有时候不想在用户正在输入的时候显示错误信息. 当前错误信息会在用户输入表单时立即显示. 由于Angular很棒的数据绑定特性,这是可以发生的. 因为所有的事务都可以在一瞬间 ...
- jdbc工具类的封装,以及表单验证数据提交后台
在之前已经写过了jdbc的工具类,不过最近学习了新的方法,所以在这里重新写一遍,为后面的javaEE做铺垫: 首先我们要了解javaEE项目中,文件构成,新建一个javaEE项目,在项目中,有一个we ...
- summernote富文本编辑器配合validate表单验证无法进行表单提交的问题
1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...
- Vue Element-ui 框架:路由设置 限制文件类型 表单验证 回车提交 注意事项 监听事件
1.验证上传文件的类型: (1)验证图片类型 <template> <el-upload class="avatar-uploader" action=" ...
随机推荐
- Python9-From-CSS-day48
1.form表单相关内容前后端有数据交互的时候用form表单form表单提交数据的几个注意事项: 1.所有获取用户输入的标签都必须放在form表单里面 2.action 控制着往哪里提交 3.inpu ...
- shell脚本中的交互式输入自动化
shell中有时我们需要交互,但是呢我们又不想每次从stdin输入,想让其自动化,这时我们就要使shell交互输入自动化了. 1 利用重定向 重定向的方法应该是最简单的 例: 以下的te ...
- 51nod_1154 回文串的划分
说实话..最开始看这题感觉一定好难...好高大上...我的马拉车还不熟....这种..但是本着做不出来也要至少看看的心态,吧个题看完了..然后简单的想了想,好像是个挺直观的动态规划,因为看到数据几乎就 ...
- 编译Kubelet二进制文件
1. 环境 系统:CentOS 7.2 Go:1.10.3 Kubernetes:1.10.4 2. 安装最新版go 编译的Kubernetes 1.10.4要求go版本在1.9.3以上,使用下面的y ...
- 03017_ajax
1.Ajax概述 (1)什么是同步,什么是异步? ①同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待卡死状态: ②异步现象:客户端发送请求到服务器端,无论服务器是否返回响应, ...
- Java-读取txt生成excel
本段代码的目的是从txt文本中读取相应格式的数据,然后写入到对应格式的excel文档中 在敲本段代码的时候,也学习了一些其它知识点,如下: 1.byte[] b_charset= String.get ...
- RSA进阶之维纳攻击(wiener-attack )
维纳攻击: 场景:e很大 例题: 第七届山东网络安全技能大赛 链接:https://pan.baidu.com/s/1IRInw3pB7SQfp3MxRJW17A 提取码:lcn3 e很大,妥了,维纳 ...
- 使用shell脚本生成数据库markdown文档
学习shell脚本编程的一次实践,通过shell脚本生成数据库的markdown文档,代码如下: HOST=xxxxxx PORT=xxxx USER="xxxxx" PASSWO ...
- JVM虚拟机系列(三)Class文件格式
- Solr 配置连接数据库
前面我们将solr安装并创建了core同时也配置可IK分词器,接下来我们通过配置连接Mysql数据库并把数据导入到solr(使用ik分词器). 1.配置managed-schema文件 Request ...