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=" ...
随机推荐
- python实现导出excel表(前端+后端)
之前在做项目管理系统的时候需要实现将数据导出到excel表的功能,搜索之后发现了python的xlwt模块可以很好的实现这项功能. 首先是导入xlwt模块: import xlwtfrom io im ...
- linux硬件基础
1. 服务器分类 机架式服务器(主要用这个). 刀片式服务器. 塔式服务器. 2. 机架式服务器 服务器的尺: U - 2U. 服务器核心之电源: 双电源 AB 路. 服务器核心之 CPU-计算 CP ...
- JAVA连接数据库,并写入到txt文件
package Hello; import java.io.BufferedReader;import java.io.BufferedWriter;import java.io.File;impor ...
- A1058 A+B in Hogwarts (20)(20 分)
A1058 A+B in Hogwarts (20)(20 分) If you are a fan of Harry Potter, you would know the world of magic ...
- (洛谷)P1019 单词接龙
题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的"龙"(每个单词都最多在"龙" ...
- angular用$sce服务来过滤HTML标签
angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...
- loj2308 「APIO2017」商旅
ref #include <iostream> #include <cstring> #include <cstdio> #include <queue> ...
- loj2055 「TJOI / HEOI2016」排序
ref #include <iostream> #include <cstring> #include <cstdio> using namespace std; ...
- 设计模式之第8章-策略模式(Java实现)
设计模式之第8章-策略模式(Java实现) “年前大酬宾了啊,现在理发冲500送300,冲1000送500了.鱼哥赶紧充钱啊,理发这事基本一个月一回,挺实惠的啊.不过话说那个理发店的老板好傻啊,冲10 ...
- python 学习分享-函数篇2
递归 自己玩自己的函数: 1. 必须有一个明确的结束条件 2. 每次进入更深一层递归时,问题规模相比上次递归都应有所减少 3. 递归效率不高,递归层次过多会导致栈溢出 递归例子和二分查找都放在里面了 ...