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 autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
一个可复用的vue分页组件
May 15 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 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
php 异常处理实现代码
2009/03/10 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
php简单获取目录列表的方法
2015/03/24 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
js 函数的副作用分析
2011/08/23 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
在Linux下调试Python代码的各种方法
2015/04/17 Python
Python实现包含min函数的栈
2016/04/29 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
pandas的相关系数与协方差实例
2019/12/27 Python
Python绘制动态水球图过程详解
2020/06/03 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
设计师大码女装:11 Honoré
2020/05/03 全球购物
高中体育教学反思
2014/01/24 职场文书
军神教学反思
2014/02/04 职场文书
给学校的建议书
2014/03/12 职场文书
植树节活动总结
2014/04/30 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
廉政承诺书范文
2015/04/28 职场文书
修辞手法有哪些?
2019/08/29 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang