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 相关文章推荐
javascript 类方法定义还是有点区别
Apr 15 Javascript
javascript 框架小结 个人工作经验
Jun 13 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
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
PHP语法速查表
2006/12/06 PHP
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
php统计数组元素个数的方法
2015/07/02 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
python实现单向链表详解
2018/02/08 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
python版大富翁源代码分享
2018/11/19 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
database面试题
2013/03/28 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
大学生创业计划书
2019/06/24 职场文书
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
python微信智能AI机器人实现多种支付方式
2022/04/12 Python