layui表单与原生js表单的一些小问题（二）

layui表单添加验证：

之前写过，链接如下

1.layui自带表单验证：https://www.cnblogs.com/a973692898/p/11577502.html

2.layui使用自定义表单验证，正则表达式：https://www.cnblogs.com/a973692898/p/11683733.html

原生的表单验证：

示例如下：

DOM：
<form>
                <input type="hidden" name='classs' class="ids" value="0" />
                <div class="block" style="float: left;">
                    <label>颜色<label>
                    <input type="text" class="gb_color" name="gb_color" placeholder="颜色" />
                </div>
                <div class="block" style="float: left;">
                    <label>尺寸<label>
                    <input type="text" class="gb_size" name="gb_size" placeholder="尺寸" />
                </div>
                <div class="block" style="float: left;">
                    <label>库存<label>
                    <input type="text" class="gb_stock" name="gb_stock" placeholder="库存" />
                </div>
                <div class="block">
                    <input type="button" id="gb-submit" name="submit" value="添加按钮"/>
                </div><br>
            </form>
表单验证部分JS：
    /*1.先设置表单验证*/
                       var gBcolor = $('[name=gb_color]').val();
                    var gBage = $('[name=gb_size]').val();
                    var gBstock = $('[name=gb_stock]').val();
                      /*1-1.验证颜色*/
                       if (gBcolor != '') {
                        var gbcolor = parseInt(gBcolor);//验证是否为数字
                        if(isNaN(gbcolor)){
                            if(/[@#$%^&*]+/gi.test(gBcolor)) { //验证是否含有特殊字符
                                alert('颜色不能带有特殊字符，请输入中文')
                                return
                            }
                           } else{
                            alert("颜色不能是数字，请输入中文");
                            return
                        }
                    }else{
                        alert('颜色不能为空')
                        return
                    }
                    /*1-2.验证尺寸*/
                       if(gBage != ''){
                           var pattern = /^[A-Za-z0-9]+$/;
                           if(pattern.test(gBage)){
                               
                           }else{
                               alert('只能是英文或者数字')
                               return
                           }
                       }else{
                           alert('尺寸不能为空')
                           return 
                       }
                       /*1-3.验证库存*/
                      if(gBstock !== ''){
                           var gbstock = parseInt(gBstock);//验证是否是数字
                             if(!isNaN(gbstock)){
                                 
                            } else{
                                alert("只能输入数字");
                                return
                            }
                      }else{
                          alert('库存不能为空')
                          return
                      }