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'}内容版权声明:除非注明,否则皆为本站原创文章。
转载注明出处:https://sulao.cn/post/305
评论列表