layui表单验证demo

最新推荐文章于 2024-09-27 22:03:48 发布

原创最新推荐文章于 2024-09-27 22:03:48 发布 · 3.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #api #表单

Web前端开发专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用layui插件进行表单验证。通过简单的代码示例展示了如何设置各种字段的验证规则，如文本输入、电子邮件和电话号码等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单验证方法很多，使用layui插件自带的验证写法也是很简单。首先到官网http://www.layui.com/下载layui插件，然后按照官方提供的API编写前台页面就可以了，下面提供一个layui.form验证的例子。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>layui.form小例子</title>
<link href="layui/css/layui.css" rel="stylesheet" />
</head>
<body>
<form class="layui-form">  
  <div class="layui-form-item">  
    <label class="layui-form-label">反馈主题</label>  
    <div class="layui-input-block">  
      <input name="title" class="layui-input" type="text" placeholder="请输入标题" autocomplete="off" lay-verify="title|required">  
    </div>  
  </div>  
  <div class="layui-form-item">  
    <label class="layui-form-label">姓名</label>  
    <div class="layui-input-block">  
      <input name="fname" class="layui-input" type="text" placeholder="请输入姓名" autocomplete="off" lay-verify="fname">  
    </div>  
  </div>  
  <div class="layui-form-item">  
    <label class="layui-form-label">手机</label>  
    <div class="layui-input-block">  
      <input name="phone" class="layui-input" type="tel" autocomplete="off" placeholder="请输入手机" lay-verify="phone|required">  
    </div>  
  </div>  
  <div class="layui-form-item">  
    <label class="layui-form-label">邮箱</label>  
    <div class="layui-input-block">  
      <input name="email" class="layui-input" type="text" autocomplete="off" placeholder="请输入邮箱" lay-verify="email">  
    </div>  
  </div>  
  <div class="layui-form-item">  
    <label class="layui-form-label">单选框</label>  
    <div class="layui-input-block">  
      <input name="sex" title="男" type="radio" checked="" value="男">  
      <input name="sex" title="女" type="radio" value="女">  
      <input name="sex" title="保密" type="radio" value="密">  
    </div>  
  </div>  
  <!--<div class="layui-form-item layui-form-text">  
    <label class="layui-form-label">普通文本域</label>  
    <div class="layui-input-block">  
      <textarea class="layui-textarea" placeholder="请输入内容">请输入内容</textarea>  
    </div>  
  </div>-->  
  <div class="layui-form-item layui-form-text">  
    <label class="layui-form-label">内容</label>  
    <div class="layui-input-block">  
      <textarea class="layui-textarea layui-hide"  name="contact" id="LAY_demo_editor" lay-verify="contact"></textarea>  
    </div>  
  </div>  
  <div class="layui-form-item">  
    <div class="layui-input-block">  
      <button class="layui-btn" lay-filter="demo2" lay-submit="">跳转式提交</button>  
      <button class="layui-btn" lay-filter="demo1" lay-submit="">立即提交</button>  
      <button class="layui-btn layui-btn-primary" type="reset">重置</button>  
    </div>  
  </div>  
</form>  
<script type="text/javascript" src="layui/layui.js"></script>
<script>  
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer  
  ,layedit = layui.layedit  
  ,laydate = layui.laydate; 
  //自定义验证规则  
  form.verify({  
        title: function(value){ 
          if(value.length < 5){  
            return '标题至少得5个字符啊';  
          }  
        }, fname: function(value){  
          if(value.length < 4){  
            return '请输入至少4位的用户名';  
          }  
        }, contact: function(value){  
          if(value.length < 4){  
            return '内容请输入至少4个字符';  
          }  
        }  
        ,phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位，只能是数字！']  
        ,email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']  
  });  

  //创建一个编辑器  
  layedit.build('LAY_demo_editor'); 

  //监听提交  
  form.on('submit(demo1)', function(data){  
    layer.alert(JSON.stringify(data.field), {  
      title: '最终的提交信息'  
    })  
    return false;  
  });  


});  
</script>