layui 表单标签的校验方法


Posted in Javascript onSeptember 04, 2019

layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值。

required(必填项)
phone(手机号)
email(邮箱)
url(网址)
number(数字)
date(日期)
identity(身份证)
自定义值

同时支持多条规则的验证,格式:lay-verify=”验证A|验证B”

如:lay-verify=”required|phone|number”

另外,除了我们内置的校验规则,你还可以给他设定任意的值,比如lay-verify=”pass”,那么你就需要借助form.verify()方法对pass进行一个校验规则的定义

示例:

<div class="layui-form-item">
  <label for="" class="layui-form-label">请输入邮件</label>
  <div class="layui-input-block">
   <input type="text" placeholder="请输入邮件" lay-verify="email" class="layui-input">
  </div>
 </div>

填入非法邮件时,点击提交会有笑脸图标提示,挺棒的!

自定义校验:

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位,且不能出现空格'
 ] 
});

当你自定义了类似上面的验证规则后,你只需要把key赋值给输入框的 lay-verify 属性即可:

<input type="text" lay-verify="username" placeholder="请输入用户名">
<input type="password" lay-verify="pass" placeholder="请输入密码">

以上这篇layui 表单标签的校验方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
JS求平均值的小例子
Nov 29 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 #Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 #Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 #Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 #Javascript
vue-loader中引入模板预处理器的实现
Sep 04 #Javascript
解决layer图标icon不加载的问题
Sep 04 #Javascript
JSX在render函数中的应用详解
Sep 04 #Javascript
You might like
Smarty安装配置方法
2008/04/10 PHP
PHP分页类集锦
2014/11/18 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
广告切换效果(缓动切换)
2009/05/27 Javascript
Javascript 二维数组
2009/11/26 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
python读写json文件的简单实现
2017/04/11 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
python实现简易通讯录修改版
2018/03/13 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
python自动发微信监控报警
2019/09/06 Python
Python中url标签使用知识点总结
2020/01/16 Python
Python必须了解的35个关键词
2020/07/16 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
幼儿教师自我鉴定
2013/11/02 职场文书
小学教师听课制度
2014/02/01 职场文书
优秀公益广告词大全
2014/03/19 职场文书
师德师风的心得体会
2014/09/02 职场文书
教师节横幅标语
2014/10/08 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL
Python面向对象编程之类的概念
2021/11/01 Python
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫