本文作者:心月

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

心月IT博客 2019-10-11
layui框架表单的使用及自定义验证规则摘要: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>


文章版权及转载声明:

本文由:IT技术博客 心月整理分享于 2019-11-18 20:17:12
若转载请注明原文及出处:http://www.xinyueseo.com/webfe/387.html

分享到:
赞(
发表评论
快捷输入:

验证码

    评论列表 (有 0 条评论,人围观)参与讨论