• layui之表单验证


    这篇文章的表单验证我只是随便记录下,望各位看官理解

    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);
          }
        });


    });

    就酱

  • 相关阅读:
    [PHP] PHP1 与 CGI
    [PHP] Phalcon操作示范
    [Shell] swoole_timer_tick 与 crontab 实现定时任务和监控
    [PHP] Phalcon应用升级PHP7记录
    [GNU] 喝一杯咖啡, 写一写 Makefile
    [PHP] Xhprof 非侵入式使用指南
    [PHP]OOP两类写法的性能对比
    [OSI] 网络间通信流程
    [OSI] 网络7层模型的理解
    [Tools] Vim 插件管理
  • 原文地址:https://www.cnblogs.com/bbllw/p/10142042.html
Copyright © 2020-2023  润新知