layui框架 -- form表单小应用

layui表单[初步使用]

官网下载并引入js与css

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" />

form表单,依赖form.js文件

样式

• form表单样式有两种 第二种有边框
  • layui-form
  • layui-form layui-from-pane
• 两种fieldset 样式
  • layui-elem-field 这种默认有边框
  • layui-elem-field layui-field-title无边框横线模式
• 还用到了面板 也有两种样式
  • 手风琴模式 layui-collapse 在内容元素中加上layui-show默认显示内容去掉默认不显示
  • 卡片模式
  • 折叠面板

		<form class="layui-form layui-form-pane "
			style="width: 90%; margin-left: 4%;">
			<input type="hidden" name="bid" value="<?=$bid ?>" />
			<hr class="layui-bg-orange">
			<fieldset class="layui-elem-field layui-field-title"
				style="padding-top: 10px;">
				<legend style="color: #FFB800;">手机</legend>
				<div class="layui-field-box">

					<div class="layui-form-item">
						<label class="layui-form-label">直拒魔分值</label>
						<div class="layui-input-block">
							<input type="text" name="phone[reject_magic_score]"
								value="<?=$ai_phone['reject_magic_score'] ?>"
								placeholder="请输入分值350~960" lay-verify="reject_magic_score"
								lay-verType="tips" class="layui-input"
								title="分数在350~960之间,系统直接拒绝分数没达到该值的用户">
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">直通魔分值</label>
						<div class="layui-input-block">
							<input type="text" name="phone[approve_magic_score]"
								value="<?=$ai_phone['approve_magic_score'] ?>"
								placeholder="请输入分值350~960" lay-verify="approve_magic_score"
								lay-verType="tips" class="layui-input"
								title="分数在350~960之间,系统直接通过分数达到该值的用户">
						</div>
					</div>

				</div>
			</fieldset>
	
	<fieldset class="layui-elem-field layui-field-title"
				style="padding-top: 10px;">
				<legend></legend>
				<div class="layui-field-box">
					<div class="layui-form-item">
						<button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</fieldset>
</form>

属性、验证 添加验证

• 验证有lay-verify=“required | 自定义”
  • 官网比较坑的是自带的验证如number… 全是必填的
  • 验证提示信息 lay-verType
    • alert
    • msg 默认的也比较坑 验证失败时提示框位置 top:1400多px根本看不到在哪，改也不知道在哪里改，后来改了tips
    • tips

js代码

layui.use(['form','element'], function(){
  var form = layui.form,layer = layui.layer;
  
//自定义验证，form验证失败会自动调用layer，其实不需要use layer
  form.verify({
	  reject_magic_score : function(value,item){
		  var approve_val = $(item).parent().parent().next().find('input').val();
		  var offerPrice = $(item).parent().parent().next().next().find('input').val();
		  if(value !=='' && ! /^\d+$/.test(value) )
		  {
			  return "请输入正整数";
		  }
		  });
//监听提交
  form.on('submit(formDemo)', function(data){
// 	  console.log(JSON.stringify(data.field));
	  $.ajax({  
	      type:"POST",  
	      url:"xx/xx.php",
	      data: data.field,
	      dataType:"html",
	      success:function(html){
	          $("#response").html(html);
	          window.location.href = 'xx.php';
	      }
	  }); 

	  return false;
  });
});