使用layui验证表单信息

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/307.html

我要评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。