layui框架表单的使用及自定义验证规则

心月IT博客 10-11

默认

摘要：layui 针对各种表单元素做了较为全面的UI支持，你无需去书写那些 UI 结构，你只需要写 HTML 原始的 input、select、textarea 这些基本的标签即可。我们在 UI 上的渲染只要求一点，你必须给表单体系所在的父元素加上class= "layui-form "，一切的工作都会在你加载完form模块后，自动完成

表单是在web开发中不可避免的问题，如果不使用框架，自己来设计表单将是一件非常麻烦和耗时的事情，但有了layui框架，表单就变得非常简单了，不用费尽心思的去想布局，也不用担心前端表单验证问题。

layui 针对各种表单元素做了较为全面的UI支持，你无需去书写那些 UI 结构，你只需要写 HTML 原始的 input、select、textarea 这些基本的标签即可。我们在 UI 上的渲染只要求一点，你必须给表单体系所在的父元素加上class="layui-form"，一切的工作都会在你加载完form模块后，自动完成。

下面来看看小案例：

<!DOCTYPE html>
<html>
<head>
	<title>layui 框架使用</title>
	<link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
	<script type="text/javascript" src="/layui/layui.js"></script>

</head>
<body>
<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">下拉选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value="0">写作</option>
        <option value="1">阅读</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关关</label>
    <div class="layui-input-block">
      <input type="checkbox" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关开</label>
    <div class="layui-input-block">
      <input type="checkbox" checked lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="0" title="男">
      <input type="radio" name="sex" value="1" title="女" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">请填写描述</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<script src="layui.js"></script>
<script>
layui.use('form', function(){
  var form = layui.form;
  
  //各种基于事件的操作，下面会有进一步介绍
});
</script>
</body>
 

</body>
</html>

layui 表单使用小案例

一个非常精美的表单就完成了，是不是给自己省了很多时间。

这个小案例里几乎包含了form表单所有功能（文件上传这里没有），当然在实际开发中可以可能需要的只是其中某一项或者几项，我们只需把各项对应的功能拿出来就可以了，不过，必须放到 form 标签内，且 form 的 class 属性 layui-form 不能少：

<fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="nav-theme">input输入框</a></legend>
    </fieldset>
    <form class="layui-form">
		<div class="layui-form-item">
		    <label class="layui-form-label">输入框</label>
		    <div class="layui-input-block">
		      <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
		    </div>
		</div>	
	</form>

	<fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="nav-theme">下拉选择框</a></legend>
    </fieldset>
    <form class="layui-form">
	    <div class="layui-form-item">
		    <label class="layui-form-label">下拉选择框</label>
		    <div class="layui-input-block">
		      <select name="interest" lay-filter="aihao">
		        <option value="0">写作</option>
		        <option value="1">阅读</option>
		      </select>
		    </div>
		 </div>
	</form>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="nav-theme">input输入框</a></legend>
    </fieldset>
    <form class="layui-form">
	    <div class="layui-form-item">
		    <label class="layui-form-label">复选框</label>
		    <div class="layui-input-block">
		      <input type="checkbox" name="like[write]" title="写作">
		      <input type="checkbox" name="like[read]" title="阅读">
		    </div>
		</div>
	</form>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="nav-theme">开关</a></legend>
    </fieldset>
    <form class="layui-form">
	    <div class="layui-form-item">
		    <label class="layui-form-label">开关开</label>
		    <div class="layui-input-block">
		      <input type="checkbox" checked lay-skin="switch">
		    </div>
		</div>
	</form>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="nav-theme">单选框</a></legend>
    </fieldset>
    <form class="layui-form">
	    <div class="layui-form-item">
		    <label class="layui-form-label">单选框</label>
		    <div class="layui-input-block">
		      <input type="radio" name="sex" value="0" title="男">
		      <input type="radio" name="sex" value="1" title="女" checked>
		    </div>
		</div>
	</form>

    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="nav-theme">文本域</a></legend>
    </fieldset>
    <form class="layui-form">
	    <div class="layui-form-item layui-form-text">
		    <label class="layui-form-label">请填写描述</label>
		    <div class="layui-input-block">
		      <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
		    </div>
		</div>
	</form>

	<fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="nav-theme">提交按钮</a></legend>
    </fieldset>
    <form class="layui-form">
		<div class="layui-form-item">
		    <div class="layui-input-block">
		      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
		      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
		</div>
	</form>
<script>
layui.use('form', function(){
  var form = layui.form;
  
  //各种基于事件的操作，下面会有进一步介绍
});
</script>

form各项功能效果

layui表单验证

在 layui 的表单中有一个属性 lay-verify ，当加上这个属性时，表示在前端提交时，这个属性是要验证的，layui 提供的 lay-verify 属性可以验证的属性及对应的值： required（必填项）、phone（手机号）、email（邮箱）、url（网址）、number（数字）、date（日期）、identity（身份证）。当然了，如果对 layui 自己的验证不满意或者想添加其他的验证，我们可以自定义验证规则。

自定义验证规则的方法：

自定义验证规则有两种方法

<script>
layui.use('form', function(){
  var form = layui.form;
          
          //自定义表单验证规则
          //自定义规则有两种方式
	  form.verify({
	  //1、自定义验证规则方法1
	  //username 验证规则的名字，在 lay-verify 的值填上这个名字，则表示该字段需用这条规则来验证
	  username: function(value, item){ //value：表单的值、item：表单的DOM对象
	    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
	      return '用户名不能有特殊字符';
	    }
	    if(/(^\_)|(\__)|(\_+$)/.test(value)){
	      return '用户名首尾不能出现下划线\'_\'';
	    }
	    if(/^\d+\d+\d$/.test(value)){
	      return '用户名不能全为数字';
	    }
	  }
	  
	  //2、自定义验证规则方法2
	  //我们既支持上述函数式的方式，也支持下述数组的形式
	  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
	  ,pass: [
	    /^[\S]{6,12}$/
	    ,'密码必须6到12位，且不能出现空格'
	  ] 
	});      
});
</script>

自定义规则在表单中的使用：

        <form class="layui-form">
		<div class="layui-form-item">
		    <label class="layui-form-label">用户名：</label>
		    <div class="layui-input-block">
		      <input type="text" name="username" placeholder="请输入" lay-verify="username" autocomplete="off" class="layui-input">
		    </div>
		</div>
		<div class="layui-form-item">
		    <label class="layui-form-label">密码</label>
		    <div class="layui-input-block">
		      <input type="text" name="password" placeholder="请输入" lay-verify="pass" autocomplete="off" class="layui-input">
		    </div>
		</div>
		<div class="layui-form-item">
		    <div class="layui-input-block">
		      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
		      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
		</div>
	</form>

完整代码：

<!DOCTYPE html>
<html>
<head>
	<title>layui 框架使用</title>
	<link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
	<script type="text/javascript" src="/layui/layui.js"></script>

</head>
<body>
	

    <form class="layui-form">
		<div class="layui-form-item">
		    <label class="layui-form-label">用户名：</label>
		    <div class="layui-input-block">
		      <input type="text" name="username" placeholder="请输入" lay-verify="username" autocomplete="off" class="layui-input">
		    </div>
		</div>
		<div class="layui-form-item">
		    <label class="layui-form-label">密码</label>
		    <div class="layui-input-block">
		      <input type="text" name="password" placeholder="请输入" lay-verify="pass" autocomplete="off" class="layui-input">
		    </div>
		</div>
		<div class="layui-form-item">
		    <div class="layui-input-block">
		      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
		      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
		</div>
	</form>

    <form class="layui-form">
		
	</form>
<script>
layui.use('form', function(){
  var form = layui.form;
  
	  form.verify({
	  username: function(value, item){ //value：表单的值、item：表单的DOM对象
	    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
	      return '用户名不能有特殊字符';
	    }
	    if(/(^\_)|(\__)|(\_+$)/.test(value)){
	      return '用户名首尾不能出现下划线\'_\'';
	    }
	    if(/^\d+\d+\d$/.test(value)){
	      return '用户名不能全为数字';
	    }
	  }
	  
	  //我们既支持上述函数式的方式，也支持下述数组的形式
	  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
	  ,pass: [
	    /^[\S]{6,12}$/
	    ,'密码必须6到12位，且不能出现空格'
	  ] 
	});      
});
</script>
</body>
 

</body>
</html>

标签： layui 表单验证 自定义验证规则