首页 > 教程 > 文章 > LayUI > 正文

layui表单验证介绍

转载2021-06-29 14:26:57 0 71

1、排序 验证

html代码

<div class="layui-form-item">
             <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
              <input type="number" name="sort" autocomplete="off" min="0" max="99999"  lay-verify="sort" class="layui-input">
            </div> 
          </div>

type="number" 之后文本框的后面就出现如上图那样的效果,并且只能输入数字和小数点

js代码

layui.use([ "form", "layer" ], function() {
var    form = layui.form;
var    layer = layui.layer;
    //表单验证
    form.render();//这句一定要加,占坑
     form.verify({

         sort:[/^$|^[0-9]{0,5}$/, '只能是数字且范围0~99999!']//这个就是上面的排序lay-verify="sort" 
         ,remark: function (value){
             if(value.length > 200){
                 return '长度大于200!请重新输入';
             }
         }
     });

     });

2.金额 验证

效果和排序一样

<div class="layui-form-item">
            <label class="layui-form-label">余额(元)</label>
            <div class="layui-input-block">
                <input type="number" name="balance" id="balance" lay-verify="money"
                 autocomplete="off" placeholder="单位:元"  
                    class="layui-input" >
            </div>
        </div>
layui.use([ "form", "layer", "laydate" ], function() {
    laydate = layui.laydate;
    form = layui.form;
    layer = layui.layer;// 表单验证
    form.render();
    form.verify({
        lenth50 : function(value) {
            if (value.length > 50) {
                return '长度大于50!请重新输入';
            }
        },
        lenth400 : function(value) {
            if (value.length > 400) {
                return '长度大于400!请重新输入';
            }
        },
        money : function(value) {
            if (value.length > 0) {
                var reg = /(^[0-9]([0-9]+)?(/.[0-9]+)$)|(^(0){1}$)|(^([0-9]+)?$)/;
                if (!reg.test(value)) {
                    return '输入格式有误';
                }
            }
            if (value.length > 50) {
                return '长度大于50!请重新输入';
            }
        }

    });    
    //下面这段代码主要是用于强制清除当用户输入0开头的数字,比如0000,02323,匹配到的话就为0
    //如果要在layui里面 写js事件之类的代码就一定要放在use组件模块里面,这是其中一个坑!
    $('#balance').bind('input propertychange', function() {
    		 var balance = $("#balance").val();		      
    		 var zero = /^(0){2,}$|^(0)([0-9])?$/;		      
    		 if (zero.test(balance)) {			      
    		 $('#balance').val(0);		      
    		 }	    
    		 });

});

更多layui知识请关注PHP中文网layui教程栏目

以上就是《layui表单验证介绍》的详细内容,更多请关注 “设计者在线”其它相关文章!

申明:本站文章多来自互联网,如果侵犯了你的权益,请联系站长及时处理!谢谢!!

  • 相关标签:layui
  • 本文由 设计者在线 原创发布,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论 条评论
  • 专题推荐

    • 帝国系统

      简介:帝国CMS系统教程,开发技巧

    • JQUERY

      简介:春节好春节好春节好春节好春节好春节好春节好春节好

    • 不忘初心牢记使命教育活动

      简介:不忘初心牢记使命教育活动

    • 我们的生活

      简介:我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活

    • 明天会更好

      简介:明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好

    推荐视频教程
    视频分类
    [!--date--]Y-m-d[!--date--]