DDR爱好者之家

layui 正则表达式验证使用实例详解
站长资源 2024/11/25 佚名
71 1538
DDR爱好者之家 Design By 杰米

前言

layui的正则表达式是在form表单中完成的。所以第一步要在你的html中加上指定的form 。

官方参考文档：https://www.layui.com/doc/element/form.html

要保证引用的layui模块中有form.js存在。

快速步骤引用form.js添加form标签，并设置class属性为layui-form，不可改在要验证的属性上加lay-verify 进行验证声明layui.form 并监听提交的按钮事件 。引用js

<script src="/UploadFiles/2021-04-02/layui.js">


主要是保证lay.modules中有form.js存在。


也可以直接引用form.js


添加form标签





<form class="layui-form" action="">





设置要验证的属性


给lay-verify赋值





<input type="text" class="input01 border" id="IdentifyId" 
name="IdentifyId" lay-verify="required|identity"/>





系统自带的属性如下：




required（必填项）

phone（手机号）

email（邮箱）

url（网址）

number（数字）

date（日期）

identity（身份证）

自定义值




如果没有想要的，可以自己写，比如


自定义验证


html标记验证的属性





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





自定义验证的规则





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





layui -form 使用说明


1.必须要先render以后，select 才可以使用。





layui.use('form', function(){
 var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
 
 //……
 
 //但是，如果你的HTML是动态生成的，自动渲染就会失效
 //因此你需要在相应的地方，执行下述方法来进行渲染
 form.render();
});





提交按钮





<button type="button" class="layui-btn layui-btn-norma" 
lay-submit lay-filter="submit_button">确定下单</button>





js自定义验证的js和提交时的操作





layui.use('form', function(){
  var form = layui.form ;
  form.render();
  form.verify({
  payTotalAmount:[
   /(^[1-9]\d*(\.\d{1,2})"submit(submit_button)", function () {
  onclickSearch();
  });
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米