layui表单[初步使用]

官网下载并引入js与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默认显示内容去掉默认不显示
  • 卡片模式
  • 折叠面板

属性、验证 添加验证

• 验证有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;
  });
});