html/javascript验证表单的两个小问题

本帖最后由唐僧踏歌于 2014-4-6 11:30 编辑

1.<tr> <td>性别： <input type="radio" name="sex" value="male" /> 男
                           <input type="radio" name="sex" value="female" /> 女
</td> </tr>
在JS语句块，要怎样验证注册用户是否已经选中一个了？

2.<tr><td>用户名：  <input name="User" type="text" size="21"></td></tr>
   像填这个用户名的时候，怎样告诉注册用户，这个框的填写规则？如：3-16位的字母或数字

残梦共飞雪 · 残梦共飞雪

本帖最后由残梦共飞雪于 2014-4-4 14:40 编辑

第一个：
document.getElementsByName('sex')获取这个名称的所有元素作为数组。
分拆数组判断isChecked。即是否被选中
因为你的元素木有ID，就用ByName了。但是getElementsByName好像在某老版本浏览器不支持。忘了具体哪个了。
ByClass在IE8不支持。

第二个：
首先限定最大长度，元素里设置maxlength = "16"
然后js里获取值，运用正则表达式来判断有数字字母以外的字符。然后再根据.length()判断长度。

沫然 · 沫然

<html>
<head>
<script type="text/javascript">
function checkReg()
{
//验证用户名
var user = document.getElementById("userid").value;
//正则表达式
var userReg = new RegExp(/^[a-zA-Z0-9]{3,16}$/);
if(!user.match(userReg))
{
document.write("用户名：3-16位的字母或数字"+"<br/>");
}
//验证性别
var sex1 = document.getElementById("sex1");
var sex2 = document.getElementById("sex2");
//如果没有选择性别就提示
if(sex1.checked==false && sex2.checked==false)
{
document.write("请选择性别：");
}
}
</script>
</head>
<body>
<form>
<table border="1" bordercolor="#000000" width="70%" cellpadding="10" cellspacing="0">
<tr>
<th colspan="2">注册表单</th>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" name="user" id="userid" /></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" id="sex1" value="nan" />男
<input type="radio" name="sex" id="sex2" value="nv" />女
</td>
</tr>
<tr>
<th colspan="2">
<input type="button" value="验证表单" onClick="checkReg()" />
</th>
</tr>
</form>
</body>
</html>

复制代码

3-16位的字母或数字
正则表达式定义：

var userReg = new RegExp(/^[a-zA-Z0-9]{3,16}$/);

也可以这样写：

var userReg = /^[a-zA-Z0-9]{3,16}$/；
这个比较简单，不用创建对象。

验证是否选中男或是女用checked方法。

忘川 · 忘川

楼上的回答都很详细啊，话说选择性别的这种单选按钮，建议设置一个默认选中的按钮，比如将男的那个checked属性设置为checked，然后男女这两个radio的name属性值设成一样，就可以做到2个radio的互斥，这样也省去了还需要验证性别是否已选的过程

唐僧踏歌 · 唐僧踏歌

先提问结束吧，都没时间看

曲佳奇 · 曲佳奇

这些事基础测试里面的题目吧至于单选按钮我记得原题的要求是为必填项我是直接设置了一个默认的
至于验证用户名可以在JS中写正则表达式然后通过exec方法判断返回值是否为null

帐号		自动登录	找回密码
密码			加入黑马

html/javascript验证表单的两个小问题

5 个回复

评分

评分

黑马骑士勋章