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=" ...
随机推荐
- 3D全景漫游
全景图共分为三种: ①球面全景图 利用一张全景图围成一个球,自身位置位于球体内.由于图片是矩形,所以最上和最下的缝合处很明显就能够看得出来. 球面全景图是最接近人眼的构建模式,若利用多个立面构建,拼接 ...
- thinkphp 3.2.3 - Route.class.php 解析(路由匹配)
class Route { public static function check(){ $depr = C('URL_PATHINFO_DEPR'); // '/' $regx = preg_re ...
- 大数据小项目之电视收视率企业项目08--》MapReduce编写之Wordcount
编程规范 (1)用户编写的程序分成三个部分:Mapper,Reducer,Driver(提交运行mr程序的客户端) (2)Mapper的输入数据是KV对的形式(KV的类型可自定义) (3)Mapper ...
- luogu3375 【模板】KMP字符串匹配
nxt数组下标从1开始而a,b数组下标从0开始. #include <iostream> #include <cstring> #include <cstdio> ...
- 谋哥:App开发者的苦逼不值得怜悯!
[谋哥每天一干货,第四十篇] 为什么取这个标题呢?因为昨天一些本来“支持”谋哥的人看到谋哥搞收费VIP群,觉得谋哥赚苦逼开发者的钱很不道德,且说谋哥我写的东西都不切实际,全部是一些思想性 ...
- 手机APP设计网
http://hao.xueui.cn/ http://www.25xt.com/
- Python框架之Django学习笔记(十六)
Django框架之表单(续) 今天简直无力吐槽了,去了香山,结果和网上看到的简直是天壤之别啊,说好的香山的枫树呢?说好的香山的红叶呢?说好的漫山遍野一片红呢?本以为在山上,一口气爬上去,沿路基本都是翠 ...
- yum 快速安装 Rabbitmq for CentOS6
1.安装CENTOS6的系统. 2.配置源 ,说明:https://github.com/rabbitmq/erlang-rpm To use Erlang 20.x on CentOS 6: # I ...
- 替换掉 in的like操作
select * from t_unit where '410300060025,410300004005,410300998851,' like '%'+ltrim(rtrim(unitcode)) ...
- WebService常用公共接口
Web Service 一些对外公开的网络服务接口 商业和贸易: 1.股票行情数据 WEB 服务(支持香港.深圳.上海基金.债券和股票:支持多股票同时查询) Endpoint: http://we ...