Heim  >  Artikel  >  Web-Frontend  >  Einführung in die Validierung von Laui-Formularen

Einführung in die Validierung von Laui-Formularen

尚
nach vorne
2020-06-12 17:22:373010Durchsuche

Einführung in die Validierung von Laui-Formularen

1. Sortierüberprüfung

HTML-Code

<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" Danach erscheint der oben gezeigte Effekt hinter dem Textfeld , und Es können nur Zahlen und Dezimalstellen eingegeben werden

JS-Code

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

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

     });

2. Betragsüberprüfung

Der Effekt ist der gleiche wie beim Sortieren

<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 &#39;长度大于50!请重新输入&#39;;
            }
        },
        lenth400 : function(value) {
            if (value.length > 400) {
                return &#39;长度大于400!请重新输入&#39;;
            }
        },
        money : function(value) {
            if (value.length > 0) {
                var reg = /(^[0-9]([0-9]+)?(\.[0-9]+)$)|(^(0){1}$)|(^([0-9]+)?$)/;
                if (!reg.test(value)) {
                    return &#39;输入格式有误&#39;;
                }
            }
            if (value.length > 50) {
                return &#39;长度大于50!请重新输入&#39;;
            }
        }

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

});

Mehr LayuiFür Kenntnisse beachten Sie bitte die PHP-Chinesisch-WebsiteLayui-TutorialSpalte

Das obige ist der detaillierte Inhalt vonEinführung in die Validierung von Laui-Formularen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen