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。