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=" ...
随机推荐
- java中的访问修饰符 (2013-10-11-163 写的日志迁移
访问级别 修饰符 同类 同包 子类 ...
- Python_day01_作业笔记
内容大纲: 1. python的出生与应用以及历史, python2x: 源码冗余,源码重复,源码不规范. python3x: 源码清晰优美简单. 2. python的种类. Cpython: 官 ...
- Ubuntu强制卸载VMware-player
有时候安装了vmwar-player,想再安装vmware-workstation,却提示一些古怪的消息(现在忘记具体是什么了).只能先卸载再安装 首先你可以尝试常规卸载: sudo vmware-i ...
- [Poj3281]Dining(最大流)
Description 有n头牛,f种食物,d种饮料,每头牛有nf种喜欢的食物,nd种喜欢的饮料,每种食物如果给一头牛吃了,那么另一个牛就不能吃这种食物了,饮料也同理,问最多有多少头牛可以吃到它喜欢的 ...
- excel VBA 将文本数值转换为数字格式(单元格中数据左上角是绿三角,鼠标点上有叹号标示)
Range("A6").SelectSelection.CopyRange("A10:A60").SelectRange(Selection, Selectio ...
- 在F12 控制台输入,可执行jquery操作
<!-- 控制台执行jquery -->var importJs=document.createElement('script') //在页面新建一个script标签importJs.se ...
- 组装需要的json数据格式
在实际项目中有时候会遇到一些有特殊要求的控件,比如easyui-combogrid,加载的并不是常见的json格式,这里我遇到过需要加载类似省市县这种三级数据格式.最后也是从别人的博客中学到的如何组装 ...
- IOS开发学习笔记010-面向对象的三大特性
面向对象的三大特性 1.封装 2.继承 3.多态 一.封装 将类内部的属性保护起来,在外部不能直接访问,那么如果需要访问怎么办呢? OC提供了set方法来对成员变量进行访问 set方法 1.作用:提供 ...
- Python+Selenium练习篇之3-利用tag name定位元素
前一篇文章介绍了如何通过元素的id值来定位web元素,本文介绍如何通过tag name来定位元素.个人认为,通过tag name来定位还是有很大缺陷,定位不够精确.主要是tag name有很多重复的, ...
- sqlserver中top 1 赋值的问题
看代码 declare @iid intselect @iid=111select top 1 @iid=isnull(IID,0) from YYGL_PCDMX where IID=0print ...