layui自带验证体系：手机号验证、邮箱验证、必填项非空验证、数字验证（含代码、案例）

案例 · 截图：

实例代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>更改手机-排版演示</title><link rel="stylesheet" href="statics/plugin/layui/css/layui.css"><link rel="stylesheet" href="statics/css/laycms_css/common.css">
</head>
<body>
<!-- 让IE8/9兼容栅格 -->
<!--[if lt IE 9]><script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script><script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<div class="layui-container mgt20"><div class="site-border-green"><fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend class="layui-font-green">更改手机</legend></fieldset></div>  <form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">已绑定</label><div class="layui-input-inline"><input type="text" name="mobilephone" placeholder="177****4530" autocomplete="off" class="layui-input" disabled=""></div></div><div class="layui-form-item"><label class="layui-form-label">账号密码</label><div class="layui-input-inline"><input type="password" name="password" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input"></div><div class="layui-form-mid layui-word-aux">请输入当前账号密码</div></div><div class="layui-form-item"><label class="layui-form-label">验证码</label><div class="layui-input-inline"><input type="text" name="imgcode" lay-verify="required|imgcode" placeholder="请输入图形验证码" autocomplete="off" class="layui-input"></div><label class="layui-form-label pdlr0 codelabel"><img src="statics/images/laycms_images/msgapi.png" alt="验证码"></label></div><div class="layui-form-item"><label class="layui-form-label">新手机号</label><div class="layui-input-inline"><input type="text" name="newmobilephone" lay-verify="required|newmobile" placeholder="请输入新手机号码" autocomplete="off" class="layui-input"></div><div class="layui-form-mid"><button type="button" class="layui-btn layui-btn-xs">发送验证码</button></div></div><div class="layui-form-item"><label class="layui-form-label">短信验证码</label><div class="layui-input-inline"><input type="text" name="smscode" lay-verify="required|number" placeholder="请输入短信验证码" autocomplete="off" class="layui-input"></div><div class="layui-form-mid layui-word-aux">请输入手机收到的验证码</div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="mobileChangeButton">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form></div><script src="statics/plugin/layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){var layer = layui.layer,form = layui.form;layer.msg('Hello World');//自定义验证规则form.verify({pass: [/^[\S]{6,20}$/,'密码必须6到20位，且不能出现空格'],imgcode: function(value){if(value.length != 5){return '图形验证码必须是5个字符啊';}},newmobile: function(value){if(value.length != 11){return '新手机号必须为11位合法数字';}var reg = /^1(3|4|5|6|7|8|9)\d{9}$/;if(reg.test(value)){// return '手机号码格式正确';}else{return '非法手机号';}},smscode: function(value){if(value.length != 6){return '短信验证码必须是6个字符啊';}}// ,repass: function(value){//   var data = form.val('loginregform');//   if((JSON.stringify(value))!=(JSON.stringify(data.password))){//     return '两次密码不一致';//   }// }// ,email: function(value){//   if(value.length < 7){//     return '邮箱至少得7个字符啊';//   }//   var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;//   if(reg.test(value)){//     // return '邮箱格式正确';//   }else{//     return '邮箱格式不正确';//   }// }});//监听提交form.on('submit(mobileChangeButton)', function(data){layer.msg(JSON.stringify(data.field));return false;});
});
</script>
</body>
</html>

代码解析：

上述代码中<input type="text" name="newmobilephone" lay-verify="required|newmobile" placeholder="请输入新手机号码" autocomplete="off" class="layui-input">，我们看到其中代码:

自定义验证规则
<input type="text" name="newmobilephone" lay-verify="required|newmobile" placeholder="请输入新手机号码" autocomplete="off" class="layui-input"> 等同于
<input type="text" name="newmobilephone" required lay-verify="newmobile" placeholder="请输入新手机号码" autocomplete="off" class="layui-input">也可以使用layui自带的验证规则，如下：
<input type="text" name="newmobilephone" lay-verify="required|phone" placeholder="请输入新手机号码" autocomplete="off" class="layui-input">

使用说明：

layui自带的验证规则，自成一体，可以看文档直接使用；
增加参数require即是默认为必填项（有layui自带的必填验证）
自定义规则可以定义多个规则一起使用，语法：lay-verify="required|规则一|规则二"多个规则之间用符号|分隔开；
自定义的验证规则，交由layui属性lay-verify="规则名称"进行绑定，与属性name="XXXX"无关；

以上就是关于“layui自带验证体系：手机号验证、邮箱验证、必填项非空验证、数字验证（含代码、案例）”的全部内容。

layui自带验证体系：手机号验证、邮箱验证、必填项非空验证、数字验证（含代码、案例）相关推荐

邮箱取消必填php,WordPress注册页面如何去掉邮箱验证，从而不再是必填选项？
现在很多网站已经不会将邮箱作为必填项,都会选择使用手机号可以注册登录,所以邮箱注册就不必设置为必填项目,那么WordPress注册页面如何去掉邮箱验证,从而不再是必填选项? 这个需求比较特殊,但是我还 ...
bootstrap必填红心_bootstrap插件bootstrapValidator常用验证规则总结
在validators中一些验证规则的总结 1.判断字段是否为空 notEmpty: { message: '用户名必填不能为空' } 2.字段长度判断 stringLength: { min: 6, ...
微信小程序 --- 表单输入验证（手机号、邮箱验证、输入非空）
js代码 Page({/*** 页面的初始数据*/data: {indicatorDots: false,autoplay: false,interval: 5000,duration: 1000,p ...
html5 表单必填项,javascript - HTML5表单必填属性。设置自定义验证消息？
javascript - HTML5表单必填属性. 设置自定义验证消息? 我有以下HTML5表格:[http://jsfiddle.net/nfgfP/] ***** 目前当我在空白时点击输入时,会出 ...
ajax必填项验证,jQuery验证 - 通过MVC2中的ajax动态添加必填字段
我正在尝试在MVC2中的表单上使用jQuery验证.我正在使用期货项目中的MicrosoftMvcJQueryValidation.js. 首次加载表单时,它是代表ViewViewModel,并且有三 ...
Ecshop会员注册的Email 电子邮箱改成非必填项
ECSHOP后台"会员注册项设置"可以调置注册项是否必填 ,但是注册时的EMAIL电子邮箱后台是无法设置必填的.但可以通过修改文件来实现 email电子邮箱非必填. 修改方法: ...
Js 常用的格式验证（手机号、邮箱，身份证）
1.手机号格式验证 // 手机号格式验证:1开头,第二位可可以是3,4,5,6,7,8,11位var reg1 = /^1[3|4|5|6|7|8]\d{9}$/; var phone = '1380 ...
php 登录非空验证,Ecshop会员注册的Email 电子邮箱改成非必填项并带非空验证邮箱合法性...
1.修改模板文件 *去掉*号就好 2.打开 /js/user.js 文件,找到下面JS代码段并修改(大概在466行左右) if (email.length == 0) { msg += email_ ...
VUE+ElementUI的表单el-from表单验证二选一必填项，并且满足条件后会清除表单验证提示。
效果图: 使用Element-UI的自定义验证实现. 这里面有个坑是,两个input输入框都点出了提示信息,填写任一输入框之后只有操作的那一项的验证提示消失了,不主动清除另一项的验证提示就会一直存在, ...

layui自带验证体系：手机号验证、邮箱验证、必填项非空验证、数字验证（含代码、案例）

案例 · 截图：

实例代码：

代码解析：

使用说明：

layui自带验证体系：手机号验证、邮箱验证、必填项非空验证、数字验证（含代码、案例）相关推荐

最新文章

热门文章