100字范文 > layui前端表单验证（身份证手机号图形验证码等）

layui前端表单验证（身份证手机号图形验证码等）

时间：2023-05-12 16:51:01

文章目录

前言一、layui前端验证二、使用步骤1.以下介绍几个常用的前端验证2.thinkphp后台验证3.效果展示

前言

layui前端框架是一款比较流行的前端框架，多模块集成的UI框架它的组件丰富且轻盈，所以前端验证也是必不可少的

一、layui前端验证

layui的前端验证的比较多样化，不仅仅有自带的一些基础验证，还可以使用一些自定义验证规则就比如正则匹配同样可以支持

二、使用步骤

1.以下介绍几个常用的前端验证

代码如下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>开户注册</title></head><link rel="stylesheet" href="/layui/css/layui.css" media="all"><script src="/libs/jquery/2.1.4/jquery.min.js"></script><style>#captcha{float: left;}#code{float: left;}#text{line-height:20px;}</style><body><fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>开户注册</legend></fieldset><form class="layui-form" action="save" method="post"><div class="layui-form-item"><label class="layui-form-label">开户银行</label><div class="layui-input-block"><input type="text" name="bank" lay-verify="required|bank" autocomplete="off" placeholder="请输入银行" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">开户账号</label><div class="layui-input-block"><input type="text" name="accout" lay-verify="required|number" autocomplete="off" placeholder="请输入账号" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">真实姓名</label><div class="layui-input-block"><input type="text" name="name" lay-verify="required|name" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入真实姓名" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">身份证号码</label><div class="layui-input-block"><input type="text" name="idcard" lay-verify="required|identity" placeholder="请输入身份证号码" autocomplete="off" class="layui-input"></div></div><br><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">图形验证码</label><div class="layui-input-inline"><input type="tel" name="captcha" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input"></div><span><div id="captcha">{:captcha_img()}</div></span><span id="text"><a href="">看不清楚！点击图片换一张？</a></span></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">手机号</label><div class="layui-input-inline"><input type="tel" id="phone" name="phone" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input"></div><input type="button" id="btn" value="免费获取验证码" class="layui-btn" onclick="settime(this)" /></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">短信验证码</label><div class="layui-input-inline"><input type="tel" id="code" name="code" lay-verify="required|code" placeholder="请输入接收的验证码" autocomplete="off" class="layui-input"></div></div></div><br><br><div class="layui-form-item"><div class="layui-input-block"><button type="submit" class="layui-btn" lay-submit="save" >立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form></body></html><script src="/layui/layui.js" charset="utf-8"></script><script>layui.use(['form', 'layedit', 'laydate'], function(){var form = layui.form,layer = layui.layer,layedit = layui.layedit,laydate = layui.laydate;//日期laydate.render({elem: '#date'});laydate.render({elem: '#date1'});//创建一个编辑器var editIndex = layedit.build('LAY_demo_editor');//自定义验证规则form.verify({title: function(value){if(value.length < 5){return '银行名称至少得5个字';}},accout: function(value){if(value.length < 5){return '账户至少得5个字符啊';}},code: function(value){if(value.length < 3){return '验证码格式不正确';}},name: function(value) {if(!new RegExp("^[\u4e00-\u9fa5\]+$").test(value)){return '姓名只能是中文';}},bank: function(value) {if(!new RegExp("^[\u4e00-\u9fa5\]+$").test(value)){return '银行只能是中文';}},pass: [/^[\S]{6,12}$/,'密码必须6到12位，且不能出现空格'],content: function(value){layedit.sync(editIndex);}});//监听提交form.on('submit(demo1)', function(data){layer.alert(JSON.stringify(data.field), {title: '最终的提交信息'})return false;});//表单取值layui.$('#LAY-component-form-getval').on('click', function(){var data = form.val('example');alert(JSON.stringify(data));});});</script><script type="text/javascript">var countdown=60;function settime(val) {if (countdown == 0) {val.removeAttribute("disabled");val.value="免费获取验证码";countdown = 60;} else {val.setAttribute("disabled", true);val.value="重新发送(" + countdown + ")";countdown--;setTimeout(function() {settime(val)},1000)}}layui.use('layer', function(){var layer = layui.layer;$(function (){//获取手机号发送验证码$('#btn').click(function (){let phone=$('#phone').val();$.post('/demo/api/send',{phone:phone},function (res){console.log(res.msg)if (res.code==200){layer.msg(res.msg);alert(res.msg)}})})})});</script>

2.thinkphp后台验证

/*** 保存新建的资源** @param \think\Request $request* @return \think\Response*/public function save(Request $request){$data=$request->param();$validate = \think\facade\Validate::rule(['phone|手机号' => 'require|mobile','captcha|验证码'=>'require|captcha','name|真实姓名'=>'require|chs','bank|银行名称'=>'require|chs','code|短信验证码'=>'require|alphaDash','idcard|身份证'=>'require|idCard',]);//验证参数if (!$validate->check($data)) {die($validate->getError());}}