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=" ...
随机推荐
- Node 操作MySql数据库
1, 需要安装 MySQL 依赖 => npm i mysql -D 2, 封装一个工具类 mysql-util.js // 引入 mysql 数据库连接依赖 const mysql = re ...
- haystack(django的全文检索模块)
haystack haystack是django开源的全文搜索框架 全文检索:标题可以检索,内容也可以检索 支持solr ,elasticsearch,whoosh 1.注册app 在setting. ...
- The Tower of Babylon UVA - 437 DAG上的动态规划
题目:题目链接 思路:每个方块可以用任意多次,但因为底面限制,每个方块每个放置方式选一个就够了,以x y为底 z 为高,以x z为底 y 为高,以y z为底 x为高,因为数据量很小,完全可以把每一种当 ...
- vim 命令总结
命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filename 打开vim ...
- Android stadio 电脑连上手机可以识别,但是连不上Android stadio
原来是因为电脑没有装Android 手机驱动,我电脑刚装了系统. 很多驱动没有装.我有一个联想驱动管理,提示我装Android手机驱动.装完之后,就可以识别到手机了. 如果你的手机在电脑不识别,那么装 ...
- 记一次开发过程中,iview遇到的一些坑以及解决办法
写在开头:本次项目采用的是vue2.0+iview3.0,最近公司没啥事,来总结一下开发过程中遇到的问题. 1.Modal关闭问题 需求背景:modal框里面是个form表单,点击确定之后,先验证fo ...
- loj2537 「PKUWC 2018」Minimax
pkusc 快到了--做点题涨涨 rp. 初见时 yy 了一个类似于归并的东西,\(O(n^2)\),50 分. 50 分 yy 做法 对于一个点,枚举他能到达的权值(假设这个权值在左子树,在右子树是 ...
- 300万PV的ASP.NET网站使用阿里云的配置建议
@老牛吃肉在博文“今天的访问高峰,扛过去了”的评论中询问了这样一个问题: 你好,站长,本公司正在考虑用阿里云.用途:互联网网站,主要站点:asp.net开发目前的考虑情况:访问ip 15-20万,pv ...
- IOS开发学习笔记025-xib和storyboard
stotyboard : 描述软件界面,大范围,比较适合整个软件的所有界面 xib文件的使用:描述软件界面,小范围,比较适合描述小界面 在xcode新建文件窗口可以看到两个文件,storyboard和 ...
- 微信小程序简单的数据表格及查询功能
简介: 此项目是一个前后端分离的小demo, 开发工具:idea+微信小程序开发工具 前端:界面布局样式和js的跳转 后端:依靠SpringBoot的业务逻辑层 项目的码云地址: https://gi ...