继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

layui框架 -- form表单小应用

慕粉2139185169
关注TA
已关注
手记 30
粉丝 27
获赞 128

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;
  });
});
打开App,阅读手记
3人推荐
发表评论
随时随地看视频慕课网APP