layui表單驗證demo

阿新 • • 發佈：2019-01-25

表單驗證方法很多，使用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._%-][email protected]([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>

layui表單驗證demo

表單驗證方法很多，使用layui外掛自帶的驗證寫法也是很簡單。首先到官網http://www.layui.com/下載layui外掛，然後按照官方提供的API編寫前臺頁面就可以了，下面提供一個layui

jQuery validate表單驗證demo

Query Validate 外掛為表單提供了強大的驗證功能,讓客戶端表單驗證變得更簡單,同時提供了大量的定製選項,滿足應用程式各種需求。官方文件 http://jqueryvalidation.org/documentation/ 也可以看看這裡的，講的也很詳細

layui表單驗證select下拉框是如何驗證的

layui 的form表單裡的select 一開始以為加上lay-verify="required"就可以驗證不空了,可是反覆試了幾次都不能驗證,程式碼如下 <div class="layui-form-item"> <label class="layui-

layui 表單驗證案例文字框，手機，郵箱，textarea等格式的驗證

文字框，手機，郵箱，textarea等格式的驗證 <script src="layui/layui.js"></script> <script src="layu

layui表單驗證範例

HTML程式碼<form id='formDemo' action="" method='POST' class="layui-form"> <input type="text" class="cell-input"name="type" lay-verif

iView 迴圈表單驗證Demo

如果專案使用的是vue+iview組合,那麼對於表單驗證便無需藉助第三方外掛,iview自己帶有封裝好的表單驗證,iview表單驗證依賴於 async-validator,這個庫可以好好看一下,可擴充套件性比較強. javascript 程式碼 <

登入頁面表單驗證Demo

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@page isELIgnored="false" %><%@

layui值表單驗證

這篇文章的表單驗證我只是隨便記錄下，望各位看官理解 1.排序驗證 html程式碼 <div class="layui-form-item"> <label class="layui-form-label">排序</label>

angular-簡單的表單驗證註冊demo

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="angular-1.3.0.js"></

bootstrapValidator表單驗證的使用，登陸Demo

需要引入內容有：jQuery的js檔案，bootstrapValidator.js ，bootstrapValidator.css檔案。 formValidatorTest.html <!DOCTYPE html> <html> <head&

layui表單ajax自定義驗證

用layui表單自定義驗證使用者名稱是否存在，一開始在下面1處放return，總是不成功，檢視發現return要寫在最後，即現在的2處原因是ajax內部的return返回到ajax定義函式，而不是返回到ajax外層的函式 form.verify({ pass: [/

layui 自定義表單驗證的幾個實例

manage ror ida div nbsp ace pla for trim *註：使用本方法請先引入layui依賴的layu.js和layui.css 1.html <input type="text" name="costbudget" lay-

純H5+c3實現表單驗證

mail ida 網址 put 滿足字段 address ini css3 客戶端驗證是網頁客戶端程序最常用的功能之一，我們之前使用了各種各樣的js庫來進行表單的驗證。HTML5其實早已為我們提供了表單驗證的功能。至於為啥沒有流行起來估計是兼容性的問題還有就是樣式太醜陋了

表單驗證

java pwd word 用戶註冊 -1 style 字符 text date <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></

JaveWeb 公司項目（4）----- Easyui的表單驗證

過程 -- 目前要求今天和數希望小項目 web 前面三篇博文講述的是界面的搭建和數據的傳輸，可以看出目前我做的這個小項目已經有了一個大體的雛形，剩下的就是細節部分的打磨和一些友好的人機交互設計，今天做的是表單的驗證，作為初學者，著實花了一番功夫，所以寫一篇博文將這

jQuery基礎（常用插件表單驗證，圖片放大鏡，自定義對象級，jQuery UI，面板折疊）

此外 cookie值添加圖標 tor 列表需要 droppable 使用 ddn 1.表單驗證插件——validate 該插件自帶包含必填、數字、URL在內容的驗證規則，即時顯示異常信息，此外，還允許自定義驗證規則，插件調用方法如下： $(form).vali

第一篇，js表單驗證模板

scrip put func wrong lur ctype lan lang 執行下面是對於一個email的表單驗證的基本模板<!DOCTYPE html><html lang="en"><head> <meta char

一個表單驗證

wrong spa 插件 position ava char email格式 box eth <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

angular js h5關於表單驗證的例子

checked tro mis scrip att sta error 自定義 account angular js表單驗證 <!DOCTYPE html><html><head lang="en"> <meta charse

Java Script 第10章 JavaScript表單驗證

cnblogs ges scrip isp asc ima javascrip lock 分享 Java Script 第10章 JavaScript表單驗證

layui表單驗證demo

相關推薦