Boostrap ToolTip提示的多值校驗

最新推荐文章于 2023-07-24 22:15:00 发布

laizhixue

最新推荐文章于 2023-07-24 22:15:00 发布

阅读量185

点赞数 1

分类专栏： JQuery JavaScript HTML BootStrap前端框架文章标签： tooltip bootstrap

本文链接：https://blog.csdn.net/laizhixue/article/details/89466337

版权

JavaScript 同时被 3 个专栏收录

37 篇文章 0 订阅

订阅专栏

JQuery

27 篇文章 0 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

效果圖：

前台控件代碼：

<input id="Before_SupplierNo" class="col-sm-4 form-control"
onkeyup=" CheckRegx('Before_SupplierNo', /^[a-zA-Z]{1}[a-zA-Z0-9]{0,9}$/, '供應商代碼不能為空，必須以字母開頭，且長度不能超過10字節！', false)" 
data-toggle="tooltip" data-placement="right" />

提交的校驗代碼：

提示：不要使用 if...else... 語法，textarea標籤也可校驗，需要使用回車換行。

var errorNum = 0;
if (!CheckIsNull('Before_Factory', '工廠不能為空！')) {
   errorNum++;
}
if (!CheckRegx('Before_SupplierNo', /^[a-zA-Z]{1}[a-zA-Z0-9]{0,9}$/, "供應商代碼不能為空，必須以字母開頭，且長度不能超過10字節！", false)) {
    errorNum++;
}
if (errorNum > 0) {
   return false;
}

方法：

   //正則校驗(控件id（取值用）,校驗規則，toolTip提示，是否允許為空狀態)
        function CheckRegx(id, regx, tip, isCanNullState) {
            var state = false;          //返回值
            var val = $("#" + id).val();//總值
            var arr = val.split("\n");  //多行值

            //isCanNullState==true，有值則校驗，無值則reutrn true
            if (isCanNullState == true) {
                if (val == null || val == "") {
                    state = true;
                } else {
                    state = false;
                }
            } else {
                state = false;
            }
            if (state == false) {
                if (arr.length > 1) {
                    //多行校驗
                    for (var i = 0; i < arr.length; i++) {
                        if (regx.test(arr[i])) {
                            state = true;
                        } else {
                            state = false;
                            break;
                        }
                    }
                } else if (arr.length = 1) {
                    //單行校驗
                    if (regx.test(val)) {
                        state = true;
                    } else {
                        state = false;
                    }
                }
            }
            //高亮顯示
            if (state) {
                $("#" + id).css("background-color", "");
                $("#" + id).removeAttr("data-original-title");
                $("#" + id).tooltip('hide');
            } else {
                $("#" + id).css("background-color", "#FF33");
                $("#" + id).attr("data-original-title", tip);
                $("#" + id).tooltip('show');
            }
            return state;
        }