layui在form表单页面通过Validform加入简单验证的方法


Posted in Javascript onSeptember 06, 2019

form简单验证

<input type="text" name="email" datatype="e" ignore="ignore" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
 datatype="e"验证邮箱
 ignore="ignore"忽略,如果填写就验证没有填入邮箱就不验证
 详情参考Validform_v5.3.2.js
 贴出一部分:
 var tipmsg={//默认提示文字;
  tit:"提示信息",
  w:{
   "*":"不能为空!",
   "*6-16":"请填写6到16位任意字符!",
   "n":"请填写数字!",
   "n6-16":"请填写6到16位数字!",
   "s":"不能输入特殊字符!",
   "s6-18":"请填写6到18位字符!",
   "p":"请填写邮政编码!",
   "m":"请填写手机号码!",
   "e":"邮箱地址格式不对!",
   "url":"请填写网址!"
  },
  def:"请填写正确信息!",
  undef:"datatype未定义!",
  reck:"两次输入的内容不一致!",
  r:"通过信息验证!",
  c:"正在检测信息…",
  s:"请{填写|选择}{0|信息}!",
  v:"所填信息没有经过验证,请稍后…",
  p:"正在提交数据…"
 }
Validform.util={
 dataType:{
  "*":/[\w\W]+/,
  "*6-16":/^[\w\W]{6,16}$/,
  "n":/^\d+$/,
  "n6-16":/^\d{6,16}$/,
  "s":/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]+$/,
  "s6-18":/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]{6,18}$/,
  "p":/^[0-9]{6}$/,
  "m":/^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$/,
  "e":/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
  "url":/^(\w+:\/\/)?\w+(\.\w+)+.*$/
 },

简单的点击图标左右开关

<input type="checkbox" name="loginflag" checked lay-skin="switch" lay-filter="switchTest" lay-text="允许|禁止">

验证的设置

<input type="text" name="password" datatype="s6-18" placeholder="请输入密码" autocomplete="off" class="layui-input">

s6-18可以根据自己的长度进行自定义设置,s代表string字符串

修改layui监听事件 先验证表单

$("#signupForm").Validform({ //根据id触发
 btnSubmit:"#formSubmit", //绑定id根据id触发验证
 tiptype:3,     //第三种方式
 showAllError:true,   //显示所有的错误
 beforeSubmit:function(curform){ //验证过后执行save方法
  save();
 },
});

原layui监听

layui.use(['form'], function(){
   var form = layui.form;
   //监听提交
   form.on('submit(submitForm)', function(data){
    save();
   });
  });

以上这篇layui在form表单页面通过Validform加入简单验证的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 #Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 #Javascript
vue按需加载实例详解
Sep 06 #Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 #Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 #Javascript
Nuxt使用Vuex的方法示例
Sep 06 #Javascript
vue中input的v-model清空操作
Sep 06 #Javascript
You might like
Session的工作方式
2006/10/09 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
js读取本地文件的实例
2017/12/22 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
学雷锋演讲稿
2014/03/04 职场文书
食品安全标语
2014/06/07 职场文书
大学教师个人总结
2015/02/10 职场文书
公路施工安全责任书
2015/05/08 职场文书
python爬虫selenium模块详解
2021/03/30 Python
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript