Bootstrap、Layui表单验证

Bootstrap表单验证

form表单的注意点：

• form标签内加入 novalidate属性，并为该表单添加id
• 每个需要验证的标签内都要加入 required属性 
• 提示信息固定写法：紧跟着要验证的标签后面添加  <div class="invalid-feedback"> 用户名至少6位</div> ,当验证不通过的时候才会显示
• 最小值 ：minlength=n ,邮箱 type="email"

 <form action="" id="editForm" novalidate="novalidate">
       <div class="form-row align-items-center">
            <input type="hidden" id="editId" value="">
             <!--                    用户名-->
             <div class="col-sm-12 my-1">
                 <div class="input-group">
                      <label for="edituserName" class="my-1">用户名：</label>
                      <input type="text" class="form-control" id="edituserName" placeholder="用户名" required="required" minlength="6">
                      <div class="invalid-feedback" style="text-align: center"> 用户名至少6位</div>
                 </div>
        　　　　</div>            

                <div class="col-sm-12 my-1">
                    <div class="input-group">
                        <label for="editEmail" class="my-1"> &nbsp;邮 箱 ：</label>
                        <input type="email" class="form-control" id="editEmail" placeholder="邮箱" required="required">
                        <div class="invalid-feedback" style="text-align: center"> 电子邮箱格式不正确</div>
                    </div>
                 </div>             
                 <div class="col-sm-12 my-1">
                    <div class="input-group">
                        <label class="my-1"> &nbsp;&nbsp;状 态：</label>
                        <div class="custom-control custom-radio custom-control-inline my-1">
                        　　<input type="radio" id="customRadioInline3" name="editStatus" class="custom-control-input" value="0">
                        　　<label class="custom-control-label" for="customRadioInline3">未激活</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline my-1">
                            <input type="radio" id="customRadioInline4" name="editStatus" class="custom-control-input" value="1">
                            <label class="custom-control-label" for="customRadioInline4">激活</label>
                        </div>
                      </div>
                </div>
         </div>
　 </form>    

验证的注意点：

获取表单的 id 并通过checkValidity()方法判断是否通过验证，通过验证则执行提交的逻辑代码，没通过验证则为表单添加 was-validated 样式

//提交编辑用户
    function editSubmit() {
      if($("#editForm")[0].checkValidity()===false){
            $("#editForm").addClass("was-validated");
        }else{
            // 提交的逻辑代码 ajax      
        }    
    }

 

Layui表单验证

form表单验证的注意点：

• form标签内加入样式 layui-form 
• 在需要验证的标签内添加 lay-verify属性

<form class="layui-form" action="" lay-filter="editForm">

        <div class="layui-form-item">
            <input name="editId" type="hidden">
        </div>

        <div class="layui-form-item" style="text-align: center">
            <img name="editImg" id="editImg" src="" style="width:80px;height: 80px;"/>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品名</label>
            <div class="layui-input-block">
                <input type="text" name="editName" lay-verify="goodName"  autocomplete="off"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">简介</label>
            <div class="layui-input-block">
                <input type="text" name="editIntro" lay-verify="goodIntro"  autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">价格</label>
                <div class="layui-input-inline">
                    <input type="tel" name="editPrice" lay-verify="goodNum" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">库存</label>
                <div class="layui-input-inline">
                    <input type="text" name="editNum" lay-verify="goodNum"  autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center">
            <button type="button" class="layui-btn layui-btn-sm " lay-submit lay-filter="editSubmit">提交</button>
        </div>

    </form>

验证的注意点：

• 可通过正则表达式验证

//自定义验证规则
      form.verify({
          goodName: function(value){
              if(value.length < 2){
                  return '商品名至少得2个字符啊';
              }
          }
          ,goodIntro: function(value){
              if(value.length < 5){
                  return '商品简介至少得5个字符啊';
              }
          }
          ,goodNum: [
              /^[1-9]\d*$/
              ,'只能是整数哦'
          ]
      });