验证信息

最新推荐文章于 2021-11-17 00:43:45 发布

weixin_33955681

最新推荐文章于 2021-11-17 00:43:45 发布

阅读量280

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b7643dcf265da28395854d6

本文介绍了一种使用JavaScript实现表单验证的方法，特别是如何通过改变输入框边框颜色来直观反馈用户输入的状态，包括对input和select元素的有效性检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//cyy_test所有input select textarare的class边框变红

var testEle=$(".cyy_test");
var testA;
// var cyyF = 0;
for(var c=0,cLen=testEle.length;c<cLen;c++){
    testA=$(".cyy_test:eq("+c+")");
    if(c != 1 && c != 3){
        // console.log(testA,1)
        if(!testA.val() || testA.val()<=0){
            if(c == 0){
                $(".cyy_test:eq(1)").css({"border":"1px solid #f00","border-radius":"5px"});
            }else if( c == 2){
                $(".cyy_test:eq(3)").css({"border":"1px solid #f00","border-radius":"5px"});
            }else{
                testA.css({"border":"1px solid #f00","border-radius":"5px"});
            }
        }
    }

}

//边框恢复颜色
//select验证选中
function SelectedText(v,ele) {
    if(!v || v<=0){

    }else{
        $(ele).siblings(".cyy_test").css("border","0");
        $(ele).css("border","0");
        // console.log(22);
        $("#padding612").attr("disabled",false)
    }
}

//input选中变色
function inputText(v,ele) {
    if(!v || v<=0){

    }else{
        $(ele).siblings(".cyy_test").css("border","1px solid #c6c6c6");
        $(ele).css("border","1px solid #c6c6c6");
        // console.log(22);
        $("#padding612").attr("disabled",false)
    }
}

onblur="inputText(this.value,this)"onchange="SelectedText(this.value,this)"
复制代码