简单的必填验证 不依赖前端框架

有时候小项目就一个页面不需要layui这种前端框架，手动简单写一个简单的必填验证：

<input type="text" class="my-css" id="ProjectName" placeholder="必填" autocomplete="off" onblur="Required('ProjectName')" />

<select class="my-css" id="ProjectType" onblur="Required('ProjectType')">
 <option value="">请选择</option>
 <option value="1">纯软件项目[SFT]</option>
 <option value="2">硬件开发项目[HDW]</option>
</select>

<script>
    //onblur
    function Required(id) {
        var obj = $("#" + id);
        obj.css('border-color', 'silver');//默认，边框银灰色
        var str = obj.val().trim();
        if (str) {
            obj.css('border-color', 'silver');//有值，边框银灰色
        }
        else {
            obj.css('border-color', 'red');//无值，边框红色
        }
    }

    //非空验证
    function RequiredAlert(id, msg) {
        var obj = $("#" + id);
        obj.css('border-color', 'silver');

        var str = obj.val();
        if (str) {
            obj.css('border-color', 'silver');//有值，边框银灰色
            return true;
        }
        else {
            obj.css('border-color', 'red');//无值，边框红色
            alert(msg + "，必填！")
            return false;
        }
    }

    //新建项目
    $(function () {
        $("#btnSave").click(function () {
            //项目名称
            if (!RequiredAlert("ProjectName", "项目名称")) {
                return;
            }
            else {
                var isChinese = /[\u4e00-\u9fa5]/.test($("#ProjectName").val());
                if (!isChinese) {
                    layer.alert('项目名称，需是中文！');
                    return;
                }
            }
            //项目类型
            if (!RequiredAlert("ProjectType", "项目类型")) {
                return;
            }

            var obj = {
                "ProjectName": $("#ProjectName").val(),//项目名称
                "ProjectType": $("#ProjectType").val(),//项目类型
            };
            console.log(obj);
        });
    });
</script>

---

说明：

① οnblur="Required('控件的id')"    当控件失去焦点时，验证是否已填写或者已选择，否则边框变红色

②提交表单的时候再次验证，有未填的必填项目则不给提交

---

 如图：