日期:2014-05-16  浏览次数:20428 次

JavaScript操作表单项总结

1、表单判文本框空

表单文本框:

<input id="orgName" type="text" name="" value=""/>

判空的JavaScript代码:

var orgName = document.getElementById("orgName").value;
if(orgName.replace(/(^\s*)|(\s*$)/g, "") == "") {
?? alert("组织机构名称不能为空!");
?? return false;
}

说明:

正则表达式(/(^\s*)|(\s*$)/g, "") 的含义如下:

\s表示所有空字符: 空格, 回车等等
/g表示全局
^表示开始
*表示0到无数个
$表示结束

整个正则表达式的含义就是, 将所有空字符替换成 ""。

2、表单下拉列表框select中选中的option的获取

表单下拉列表:

<select name="menu">
?????? <option value="0">—— ——</option>????
?????? <option value="1">个人信息</option>??????
?????? <option value="2">修改密码</option>??????
?????? <option value="3">博客管理</option>??????
?????? <option value="4">好友管理</option>??????
?????? <option value="6">短信管理</option>??????
?????? <option value="7">链接管理</option>??????
?????? <option value="8">参数设定</option>??????
?????? <option value="9">布局管理</option>??????
?????? <option value="10">安全管理</option>??????
</select>

获取的JavaScript代码:

var select = document.getElementById("menu");
var options = select.getElementsByTagName("option");
var menuId = null;
var menuName = null;
for(var i=0;i<options.length;i++) {
if(options[i].selected) {
?? menuId = options[i].value;
?? menuName = options[i].innerText;
?? break;
}
}

判断下拉列表中哪个选项被选中,通过判断options[i]的selected属性是否为true;如果被选中,取出value和innerText。

这里,你完全可以把option中的value(即options[i].value)设置为对应于数据库中一条记录的主键ID,而把innerText(即options[i].innerText)设置为一条记录的name,比如,表示菜单的表为MENU,其主键为id,还有一个字段就是菜单名称name,在JSP页面上将菜单的id和name分别迭代出来,分别置于select下拉列表中option中的value和innerText位置上即可。

3、判断表单文本框输入为数字

表单:

<input id="money" type="text" name="money" value=""/>

JavaScript代码:

var money = document.getElementById("money").value;
if(isNaN(money)) {
?? document.getElementById("tipsInfo").innerText = "必须是数字!!!";
?? return false;
}

isNaN()函数表示某个变量的值不是数字,通过isNaN()函数就能判断输入的是否是数字。

?

?

4、设置单选按钮不被选中

在填写表单的时候,很可能需要重置表单内容,包括将已经选中的单选按钮设置为未选中状态。

表单上的单选按钮:

<input type="radio" name="anser" value="A">
<input type="radio" name="anser" value="B">
<input type="radio" name="anser" value="C">
<input type="radio" name="anser" value="D">

<input type="button" name="clear" value="清空" onclick="clear()" >

对应的JavaScript代码:

function clear() {
var ansers = document.getElementsByName("anser");
for(var i=0;i<ansers.length;i++) {
?? if(ansers[i].checked) {
??? ansers[i].checked = false;
?? }
}
}

当然,通过这种方式,也可以通过判断获取到选择的单选按钮的value。