layui对表单使用lay-verify属性,然后可以通过该属性来对应编写验证规则,这里是我写过一个验证,记录下,以后可能用的上
reg.js
layui.use(['form','jquery','layer'], function(){ var form = layui.form ,layer = layui.layer ,$ = layui.jquery; /* $('#dosubmit').click(function(){ var username = $('#username').val(); var password = $('#password').val(); var pwdconfirm = $('#pwdconfirm').val(); var email = $('#email').val(); var nickname = $('#nickname').val(); var protocol = $('#protocol').attr('checked'); if(username.length < 2 || username.length > 20){ layer.msg('用户名长度位2-20位!',{icon: 2,time: 500}); return false; } if(!new RegExp("^[0-9a-zA-Z]+$").test(username)){ layer.msg('用户名只能数字加字母',{icon: 2,time: 500}); return false; } if(password.length < 6 || password.length > 20){ layer.msg('密码长度位6-20位!',{icon: 2,time: 500}); return false; } if(password != pwdconfirm){ layer.msg('两次密码输入不一致!',{icon: 2,time: 500}); return false; } if(!new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$").test(email)){ layer.msg('邮箱不正确,请输入邮箱!',{icon: 2,time: 500}); return false; } if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(nickname)){ layer.msg('昵称不能有特殊字符!',{icon: 2,time: 500}); return false; } if(!protocol){ layer.msg('请同意注册协议',{icon: 2,time: 500}); return false; }*/ form.verify({ username: function(value){ if(value.length < 2 || value.length > 20){ return '用户名长度为2-20位!'; } } ,password: function(value){ if(value.length < 6 || value.length > 20){ return '密码长度为6-20位!'; } } ,pwdconfirm: function(value){ var pwd = $('#password').val(); if(value != pwd){ return '两次密码输入不一致!'; } } ,nickname: function(value){ if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){ return '昵称不能有特殊字符!'; } } ,protocol: function(value){ if(!$('#protocol').is(':checked')){ return '请勾选注册协议!'; } } }); });
注册页表单register.html
{template 'member', 'header'} <div class="layui-register"> <div class="layui-title"><h2>用户注册</h2></div> <form method="post" action="" id="myform" class="layui-form layui-form-pane"> <input type="hidden" name="siteid" value="{$siteid}" /> <div class="layui-form-item"> <label class="layui-form-label">{L('username')}</label> <div class="layui-input-block"> <input type="text" name="username" id="username" lay-verify="username" autocomplete="off" placeholder="请输入用户名" class="layui-input" style="width: 170px;"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">{L('password')}</label> <div class="layui-input-block"> <input type="password" name="password" id="password" lay-verify="password" autocomplete="off" placeholder="请输入密码" class="layui-input" style="width: 170px;"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">{L('cofirmpwd')}</label> <div class="layui-input-block"> <input type="password" name="pwdconfirm" id="pwdconfirm" lay-verify="pwdconfirm" autocomplete="off" placeholder="请再次输入密码" class="layui-input" style="width: 170px;"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">{L('email')}</label> <div class="layui-input-block"> <input type="text" name="email" id="email" lay-verify="email" autocomplete="off" placeholder="请输入邮箱" class="layui-input" style="width: 170px;"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">{L('nickname')}</label> <div class="layui-input-block"> <input type="text" name="nickname" id="nickname" lay-verify="nickname" autocomplete="off" placeholder="请输入您的昵称" class="layui-input" style="width: 170px;"> </div> </div> <div class="layui-form-item"> <div class="layui-input-inline" style="width:100%;text-align: center;"> <input type="checkbox" name="protocol" id="protocol" lay-verify="protocol" title="我同意纯美图网注册协议" checked> </div> </div> <div class="layui-form-item"> <div class="layui-input-inline" style="width:100%;"> <input type="submit" name="dosubmit" value="{L('agree_protocol_post')}" class="layui-btn" lay-submit="" lay-filter="dosubmit"> </div> </div> <div class="layui-form-item"> <div class="layui-input-inline" style="width:100%;text-align: right;"> <a href="{APP_PATH}index.php?m=member&c=index&a=login&siteid=1">已有账户,请登录!</a> </div> </div> </form> </div> <script type="text/javascript" src="{LAYUI_PATH}reg.js"></script> {template 'member', 'footer'}