Lauiui フォーム検証の概要

リリース: 2020-06-12 17:22:37
転載
3096 人が閲覧しました

Lauiui フォーム検証の概要

1. 並べ替えの検証

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" その後、テキストボックスの後ろに上記のような効果が表示されます、数字と小数点のみ入力可能

jsコード

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金額確認

効果は並べ替えと同じ

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

});
ログイン後にコピー

続きlayui知識についてはPHP中国語ウェブサイトにご注意くださいlayuiチュートリアルコラム

以上がLauiui フォーム検証の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:cnblogs.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート