layer表單驗證與提交

時間 2021-01-19

標籤 javascript css java jquery json 框架 ide post 測試欄目 HTML 简体版

原文原文鏈接

一.layer表單提交及驗證方法（添加員工頁面）javascript

<form class="layui-form layui-form-pane1 pzjzsj" action="">css

<div class="layui-form-item">java

<label class="layui-form-label">手機號</label>jquery

<div class="layui-input-inline">json

<input type="text" name="mobile" lay-verify="phone" placeholder="請輸入手機號" autocomplete="off" class="layui-input" value="${PhomeUser.mobile }"/>框架

</div>ide

</div>post

<div class="layui-form-item">測試

<label class="layui-form-label">真實姓名</label>ui

</div>

</select>

</div>

</div>

</div>

<a class="layui-btn layui-btn-normal" href="javascript:disAuthority()">選擇系統分配</a>

</div>

</div>

</div>

</form>

layui.use(['layer', 'form'], function () {

var layer = layui.layer, $ = layui.jquery, form = layui.form();

//表單驗證

form.verify({

firstpwd: [/(.+){6,12}$/, '密碼必須6到12位'],

secondpwd: function(value) {

if(value != $("#firstpwd").val()){

$("#secondpwd").val("");

return '確認密碼與密碼不一致';

}

productCodes: function(value){

if(value == ''){

return "請選擇系統分配";

}

sysqx: function(value){

if(value == ''){

return "請選擇權限";

}

});

//單選監聽及過濾事件

form.on('radio', function(data){

if(data.value==0){

$("#view").val(1);

$("#edit").val(0);

}else if(data.value==1){

$("#view").val(0);

$("#edit").val(1);

}

$("#sysqx").val(data.value);

console.log(data.value)

});

//提交監聽事件

form.on('submit(save)', function (data) {

params = data.field;

//alert(JSON.stringify(params))

submit($,params);

return false;

})

var obj = document.getElementById('closeBtn');

obj.addEventListener('click', function cancel(){

CloseWin();

});

})

//提交

function submit($,params){

$.post('${path}/sys/user_systemallot_insert.do', params, function (res) {

if (res.status==1) {

layer.msg(res.message,{icon:1},function(index){

CloseWin();

})

}else if(res.status==2){

layer.msg(res.message,{icon:0},function(){

parent.location.href='${path}/sys/toLogin';

CloseWin();

})

}else{

layer.msg(res.message,{icon:0},function(){

location.reload(); // 頁面刷新

return false

})

}

}, 'json');

}

//關閉頁面

function CloseWin(){

parent.location.reload(); // 父頁面刷新

var index = parent.layer.getFrameIndex(window.name); //先獲得當前iframe層的索引

parent.layer.close(index); //再執行關閉

}

//window.open彈窗事件

var openWin ;

function disAuthority(){

var url = '${path}/sys/user_systemallot.do';

/* layer.open({

type: 2,

title: '分配系統及權限',

shadeClose: true,

shade: false,

maxmin: true, //開啓最大化最小化按鈕

area: ['800px', '500px'],

content: url

}); */

openWin = window.open(url,'分配系統及權限','height=480,width=800,top=130,left=200,toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');

}

//設置系統編號（window.open彈出頁面向父頁面傳值調取方法）

function setCodes(codes){

document.getElementById("productCodes").value=codes;

openWin.close();

}

</script>

//window.open彈出頁面，選擇系統權限表單（重點是選擇checkbox,選中與取消）

</div>

<thead>

<tr>

<th>系統建立時間</th>

</tr>

</thead>

<c:forEach items="${productList}" var="list">

<tbody>

<tr>

<td>${list.title }</td>

<td>${list.aircrewCnt }</td>

<td>${list.evaporatorCnt }</td>

<td>${list.creatTime} </td>

</tr>

</tbody>

</c:forEach>

</table>

</form>

/* layui.use(['layer', 'form','element'], function () {

var layer = layui.layer, $ = layui.jquery, form = layui.form(),element = layui.element();

form.on('submit(distri)', function (data) {

window.opener.setCodes(selectAll());

return false;

});

}) */

//window.open彈出頁面調取父頁面方法並賦值

function selProduct(){

window.opener.setCodes(selectAll());

}

//checkbox選中事件，全選及部分選擇

$(function(){

$('#tbodyID #ckb_select').on('click',function(evt){

var allCks = document.getElementsByName("ckb_select");

var cks = document.getElementsByName("checknum");

if(allCks[0].checked){

for(i=0;i<cks.length;i++){

cks[i].checked = true;

}

}else{

for(i=0;i<cks.length;i++){

cks[i].checked = false;

}

});

//獲取選中的checkbox所在行字段全部值的字符串拼接

function selectAll(){

var text = $("input:checkbox[name='checknum']:checked").map(function(index,elem) {

return $(elem).val();

}).get().join(',');

//$("#codings").val(text);

//alert("選中的checkbox的值爲："+text);

return text;

}

</script>

<label class="layui-form-label">蒸發器開啓：</label>

<input type="checkbox" name="evpstatus" id="evpstatus" lay-skin="switch" value="${status }" <c:if test="${status eq 1}">checked</c:if>/>

</div>

</div>

</form>

layui.use('form', function(){

var form = layui.form();

form.on('switch', function(data){

if(data.value==1){

$("#evpstatus").val(0);

}else{

$("#evpstatus").val(1);

}

//console.log(data.value)

});

//監聽提交

form.on('submit(save)', function(data){

params = data.field;

//console.log(JSON.stringify(params))

var obj = new Object();

obj.productCoding = params.productCoding;

obj.coding = params.coding;

obj.parameter = "PE003";

if(params.evpstatus == undefined){

obj.value = "0";

}else{

obj.value = params.evpstatus;

}

console.log(JSON.stringify(obj));

submit($,obj);

return false;

});

function submit($,params){

$.post('${path}/ctrl/controlEdit', params, function (res) {

console.log(JSON.stringify(res));

layer.msg(res.msg,{icon:1},function(index){

parent.location.href=path+'/evaporator/list?productCoding='+'${productCoding}';

CloseWin();

})

}, 'json');

}

//關閉頁面

var obj = document.getElementById('closeBtn');

obj.addEventListener('click', function cancel(){

CloseWin();

});

function CloseWin(){

var index = parent.layer.getFrameIndex(window.name); //先獲得當前iframe層的索引

parent.layer.close(index); //再執行關閉

}

</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。