js表单验证之下拉框?

JavaScript011

js表单验证之下拉框?,第1张

先上图

再上代码

<select>

<option value="0">请选择</option>

<option value="1">一年级</option>

<option value="2">二年级</option>

<option value="3">三年级</option>

</select>

<button type="submit">提交</button>

<script>

var btn = document.getElementsByTagName('button')[0]

btn.onclick = function(){

var s = document.getElementsByTagName('select')[0]

if ( s.value == 0 ) {

alert( 'no' )

} else {

alert( 'yes' )

}

}

</script>

再来个说明

首先,不写 id 不就可以不被 document.getElementById 定位了么。

再者,表单验证是无法判断值是被手动选择的,还是被 js 加上的;它只会判断结果。过程无法判断,否则就不会有某网站遭到批量恶意注册这样的新闻了。

你说的不让 js 写入值,只能根据你的项目做分析。比如是用户注册,你可以通过限制同一个ip多次注册。或者限制填写表单的时间,比如选择值并提交这个过程需要 10 秒后才能提交成功。

【覆盖select】

自定义的层给select遮挡住是一个老问题了,不过可喜的是ie7和ff都已经支持select的zIndex,只要给层设定高的zIndex就能覆盖select了,可惜对于ie6这个问题还是需要解决。

覆盖select据我所知有两个比较好的方法:

1,显示层时,先隐藏select,关闭层时再重新显示;

2,用一个iframe作为层的底,来遮住select。

方法1应该都明白,方法2就是利用iframe可以覆盖select的特性,只要把一个iframe作为层的底部就可以覆盖下面的select了,程序中是这样使用的:

this.Lay.innerHTML = '<iframe style="position:absolutetop:0left:0width:100%height:100%filter:alpha(opacity=0)"></iframe>'

可以看出这个透明的iframe也以同样覆盖整个页面,如果是有内容显示的页面最好设置z-index:-1确保iframe在层的底部。

个人觉得使用方法2比较好,但始终是改变了页面结构,有时会比较难控制,至于方法1就比较容易方便。

详细看参考资料

单选下拉列表框对象的value属性值就是选中项的value值,因此只需用如下代码即可

1

var selected_val = document.getElementById(select_id).value

并且,通过操作select下的option也可以得到被选项的value值,方法为:

var sel = document.getElementById(select_id)

var selected_val = sel.options[sel.selectedIndex].value

实例演示如下:

1、HTML结构及javascript代码

<select id="test" onchange="alert(this.value)">

<option value="0">options-0</option>

<option value="1">options-1</option>

<option value="2">options-2</option>

</select>