JQuery 表单验证按钮提交之前变色

希望实现表单都有值后按钮就自动变色



<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Title</title>



<styletype="text/css">

.errstyle{border:1pxsolidred;}

.bor{border:1pxsolid#C0C0C0;}

</style>

<scripttype="text/javascript">

//检查select

functioncheckSelect(obj){

varval=obj.value;

if(val=="0"){

obj.className="errstyle";

returnfalse;

}else{

returntrue;

}

}

//检查input

functioncheckInput(obj){

varval=obj.value;

//这个地方需要处理一下空格

if(val==""){

obj.className="errstyle";

returnfalse;

}else{

returntrue;

}

}

//获取焦点时清除错误

functionclearerr(obj){

if(obj.className="errstyle"){

obj.className="bor";

}

}

//提交校验

functiondosubmit(){

varselect1=checkSelect(document.getElementById('select1'));

varselect2=checkSelect(document.getElementById('select2'));

varinput1=checkInput(document.getElementById('input1'));

varinput2=checkInput(document.getElementById('input2'));



if(select1&&select2&&input1&&input2){

//提交表单代码

alert("验证通过可以提交表单");

}else{

alert("验证不通过不能提交");

}

}

</script>

</head>

<body>

<formid="myform"name="myform"method="post"action=''>

<p>select1：

<selectid="select1"name="select1"class="bor"onfocus="clearerr(this);">

<optionvalue="0">0</option>

<optionvalue="1">1</option>

<optionvalue="2">2</option>

<optionvalue="3">3</option>

<optionvalue="4">4</option>

<optionvalue="4">4</option>

</select>

</p>

<p>select2：

<selectid="select2"name="select2"class="bor"onfocus="clearerr(this);">

<optionvalue="0">0</option>

<optionvalue="1">1</option>

<optionvalue="2">2</option>

<optionvalue="3">3</option>

<optionvalue="4">4</option>

<optionvalue="4">4</option>

</select>

</p>

<p>input1：<inputtype="text"id="input1"name="input1"value=""class="bor"onfocus="clearerr(this);"></p>

<p>input2：<inputtype="text"id="input2"name="input2"value=""class="bor"onfocus="clearerr(this);"></p>

<inputtype="button"onclick="dosubmit();"value="提交"/>

</form>

</body>

</html>

11 个解决方案

#1

那你就添加onblur事件去判断了，当光标离开文本框的时候去执行你的按钮校验代码,如果全部通过就把按钮的颜色改变。

11 个解决方案

#1

更多相关文章

随机推荐